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

Ionic Framework ionic-v3
1

Having this issue only in iOS emulator and also in real device (using Ionic View). Android looks fine.

Even when using a Start Sample App (Tabs Sample with Beta 10), and just adding some content to each tab (just so it has enough to scroll) -

To Simulate -
a) Open App - App opens with first tab.
b) Now select second tab.
3) Go back to First tab and try to scroll. The scroll would not work in first tab.

The other thing I observed is that as if the scroll is attached to second tab in step 3, that is, the scroll would have moved the second tab content even though we are in first tab.

I am not sure if this is an issue with Beta 10 or if my environment issue.

Thanks.

1 Like
2

Just to check, you’re adding content to the ionContent?

3

Yes, I am adding to ion-content. Something like below… (for each tab page)

`

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

aaa

`
4

I have saem issue here. Any friend with sugestion to fix this ?

5

Yep, same here. I’m glad I’ve found this post, was going nuts trying to find a cause… Hope there will be a solution or workaround soon.

6

Same here. Glad to see common problem

7

Is someone looking at this? Or do we have to report this somewhere? (I’m new here so I don’t know how this works when an issue like this is found)

8

Hmm, I’m not able to replicate this issue.

ionic start tmp --v2  && cd tmp

Added the content to home.html in order to make it scroll, then scrolled, switched tabs, switched back, and was still able to scroll.

This was using the standard tabs app, using beta10.

9

Yes beta10. I did the same here (new tmp app). Add the content to BOTH tabs and run on IOS simulator. First tab opens (you can scroll), switch to second tab (you can scroll), switch back to first tab (now you can NOT scroll), switch to second tab (here you still can scroll).

Opening a modal can get the scroll to work again (at least in my other project).

10

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

11

Is correct open issue to report this?

12

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

13

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

14

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
15

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

16

@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
17

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.

18

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).

19

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

20

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