Framework7: Problem with scrolling in App in Home Screen Added.

[coronadofactory]

Hello.

Congratulations for your product.

We're evaluating the product in our lab, to create an app in future. We're created a little App added in home screen IOS.
We found a bug, when every time when we load the app and we go to second page (via href in a route) the scroll not working and we cannot see the bottom of the new page. Then, we press de back button and press the link again to the new page and the scroll working.

We hope this issue help you

Thank you
Jose

[nolimits4web]

Not sure what is happening but i can't replicate or see such issue

[zhengdahan]

Hello, I have the same problem.
In iOS 9 or iOS11 safari browser, when I pull down or pull up the page, the page can't scroll. I used the Framework7 Vue Webpack App Template, you can try this demo in iOS Safari
I hope this problem can be solved，thank you

[coronadofactory]

Another effect when scroll fails, the title is not blocked at the top. The title is sticked with rest of the body and it move with it.

[mjwvb]

This might be related to the webkit overflow scrolling bug on iOS. Apple seems to implement a caching mechanism to make scrolling smoother, which causes trouble for dynamic content.

I also encountered this with Framework7. For us the problem occurred specifically when a collapsed accordion is located on a page, whereby the page content is not overflowing in its original state. Then, when you expand the accordion so the page content will be overflowing, you simply can't scroll to the bottom because of the cached overflowing state.

What fixes the problem is to always set -webkit-overflow-scrolling to "auto". However, you generally want the smooth user experience it offers. So what you need to do is always make the contents of .page-content 1px larger than the height of .page-content itself. This forces safari to always recalculate the overflowing. We achieved this by adding a "before" content, and giving it the height of the .page-content + 1px.

See the following code:

.device-ios .page-content::before { display: block; content: ""; position: absolute; z-index: -99999; top: 0px; left: 0px; bottom: -1px; right: 0px; }

I don't know if this also fixes your problem, but it might be related. You can test it by simply setting -webkit-overflow-scrolling to auto on .page-content, and see if the problem still occurs.

[zhengdahan]

@mjwvb thank you very much, you help me solve this problem, this bug cost me a few days，i try another framework called onsenUI, this framework has the same problem with framwork7, the reason is that they both use the -webkit-overflow-scrolling property

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically closed due to inactivity. If this issue is still actual, please, create the new one.