[SOLVED!] Tabbed app layout + tabbed page: scroll doesn't work

[Tim]

Hi there!

First, I would like to thank Vladimir for his great work on Framework7! I’m making a pledge today to support you in developing Framework7.

My question: I’ve built several apps still with V1, and never had any problem with the interface and scrolling and such. Now I’m converting one app to v4, and have some sort of scrolling issue.

I’ve a tabbed app layout, which works great when using regular pages. But now on one tab, I’ve added a page with two swipable tabs. This still works ok. When clicking on a link inside one of the two tabs a new page open. Now, when going back the swipable tabs can’t scroll vertically anymore. When switching to another “main tab” and going back, it works again.

I’ve double checked all classes and div structure, but that seems to be ok. This issue only appears when using swipable tabs and animated tabs. When using unanimated tabs, it all works as expected.

Do you have any idea? Thanks in advance!
Tim

[nolimits4web]

Do you have live example with the issue? Where does it happen, only in iOS or in browser too?

[Tim]

It happens in native Cordova app, as well as in iOS safari. Here is my current development version:

http://dev.cyberbrain.nl/bb-app-v2/ (if you remove -v2, you can see the version built on Framework7 V1)

It happens on the ‘Events’ tab. Just go to ‘Events’ in the bottom bar, swipe to the tab ‘Vorige events’ and then click on some event. If you go back, the vertical scroll doesn’t work anymore on both tabs. If you go for example to main tab ‘Nieuws’ and go back to ‘Events’, it works again.

It is not really a show-stopper, as I can remove the swipeable or animated classes from the tab wrapper and they stil work correct as regular tabs. But I really like the swipeable tabs.

[nolimits4web]

Yeah, this is annoying iOS issue i see more and more often. Can’t figure out the real reason behind it yet, but there is some trick, add the following code to your JS that should solve the issue:

$$(document).on('page:afterin', (e, page) => {
  page.$el.css('overflow', 'hidden');
  setTimeout(() => {
    page.$el.css('overflow', '');
  }, 0);
});

Where $$ is the Dom7. Add this code to your main JS file after you init the app.

[Tim]

Great workaround, that ‘fixed’ it indeed! Seems like something in iOS rendering. If I inspect the native app using Safari on my desktop, and just disable and enable some CSS rule, the scroll also works again.

I’ve added it to my main F7 app constructor: