Ionic2 Beta10 - Tab with Scroll content - Scroll not working in iOS

I have exact same issue. I discovered this post after posting my issue. Content scroll freezes on tab change

Is correct open issue to report this?

@mhartington I am also facing the exact issue. Someone from Ionic team, please reply

Please provide a small git repo that has this issue. I have not been able to replicate this in any of my demos

Thanks @mhartington for the prompt reply. I created a sample git repo to replicate the issue.

https://github.com/aggarwalankush/ionic-2-tabs-scroll-issue

It’s a clone of ionic-conference-app with 1 commit(added ionic tabs scroll issue) by me. I tested issue on physical iPhone 6 device. I think it should be same in all devices.

How to replicate issue

  • There are two tabs in app - Schedule, W3Schools
  • Go to W3Schools tab and scroll
  • Go back to Schedule Page and try scrolling it, it doesn’t scroll now

Hopefully, you’ll be able to replicate the issue. Let me know if I can provide any more details.

You are an Ionic expert, but for others like me, here are the detail steps to replicate scroll issue

  1. clone above repo
  2. npm install
  3. ionic build ios
  4. run on physical iOS device using XCode
  5. Go to W3Schools tab and scroll
  6. Go back to Schedule Page and try scrolling it, it doesn’t scroll now

-Thanks

1 Like

You should not be using an Iframe. Apps will be rejected by apps stores if you try to do this. Use the inappbrowser for this.

In the case of @ankushagg93 app, the viewport units are to blame here. You really should avoid using them as they’re problematic.
Switching to:

.full-iframe {
  position:absolute;
  top: 0;
  bottom:0;
  left:0;
  width: 100%;
}

Fixes your issue.

Really again, I cannot stress this point enough.

Using an iframe will get you app rejected by the app store and is not recommended

@mhartington Thanks for the response.
[EDIT]- Issue Fixed
I found a solution in ionic 2 beta 11 milestones. Adding below css in app.core.scss resolves the issue is beta 10.

ion-tab {
  transform: translateY(-200%);
}

ion-tab.show-tab {
  transform: translateY(0);
}

Reference Issue: https://github.com/driftyco/ionic/issues/7154

[Old Question]
I changed the css but it didn’t affect anything. Same issue with this css.

Also, I created this repo with sample w3schools iframe. In my actual app, I’m using iframe in to load a html page having some graphs. This way, it feels like graphs are part of mobile app as we get on top. I can’t achieve this functionality with InAppBrowser.

Also, apple only rejects apps if they are mostly depend on iframes. I’m using iframe only in one page. We already have a native app using few iframes. With awesome Ionic 2 SDK and helpful community, we are moving to hybrid :thumbsup:

Adding to that, there is one more issue. If you comment out <iframe> line, it will show no content on that tab. Now if you scroll empty content, content of SchedulePage will also scroll. It’s like they are sharing scroll view.

2 Likes

I guess you have a different version of Ionic or added the CSS fix already. Because to reproduce you just simply create an empty app, add content to two tabs and run it on IOS.

But the CSS fix (in app.core.scss) does fix the problem in beta 10.

Again (for readers searching about this) also without an iframe (just an empty app) you have this problem (which can be fixed now for beta10).

Great!! works like a charm. Thanks for pointing this out.

I dont know what side effects it will have but that solved the issue. Thanks

Upgrade to nightly built (Beta11) fixed my issue.

This is gorgeous! It Work for me. Thanks.

Whats the repo for nightly build, beta 11?

ionic-angular@nightly

I also had to add a negative z-index to tabs, to prevent the tabs showing white blank on some tabs:

ion-tab {
transform: translateY(-200%);
z-index: -1
}
ion-tab.show-tab {
transform: translateY(0);
}

Having this same issue with Beta11 and have not tried this css workaround. any possible settings that i need to look. I am not using any iframe, simple ionic content.

same for me I have for example a list of ionic cards (with different sizes), the scrolling on device is not fluid (and the component is completely loaded) tested on galaxy edge 6 and iphone 6. No iframe nor tabs used, same problem with ion select.

this happens even if I need a half-screen scroll it’s not related to long lists. And I’m with beta 11 as well.

this happens when the device is connected to my Mac (for debug) when i disconnect usb everything is ok

hi, do still hv this issue? my scrolling also get stuck sometimes