(iOS) Sometimes scrolling body and not .page div

Hi guys,

So I am running into a little hickup: “during transition” from one page to another, so after clicking some <Link/> or something, sometimes the following is happening:

While the page transition is still happening or rather almost finished, if the user wants to scroll a couple of ms too soon, there is still no page rendered, but the “app container” with all its navbars and so on - so the <body> has framework7’s default height: 100%.

This results in, at least on iOS, that the user is stuck with scrolling the body, which is not possible because of height: 100% - the user has to “stop trying to scroll” for maybe like 300-500ms and then try again to actually scroll the .page div.

What can I do about that? My users wont know that and are trying to scroll a bit too soon and wont be able to until they stop for like 300-500ms. Some users will be very frustrated by this, it is happening even to me during testing all the time. :frowning_face:

Any ideas?

EDIT: I am not 100% sure but is this the same problem? https://github.com/framework7io/Framework7/issues/169
I obviously don’t want to disable the “iOS bounce” all together, since every iOS user is so used to this behaviour. is there no other workaround?

Thanks, cheers, Patrick

If you do a cordova app then you can set DisallowOverscroll in config.xml to disable it. Otherwise, only such hacks like in this issue link, but i would nothing to do with it.

I now tried exactly this: <preference name="DisallowOverscroll" value="true"/>

This helpers but now I am having a new problem:
When I am typing in an input in the app, iOS automatically scrolls to this input, resulting in a very ugly app (for example my app content is directly behind the statusbar at the top).
Biggest problem is: after typing, I can’t scroll back again due to <preference name="DisallowOverscroll" value="true"/>.
Any way around this? What is the proper way to do this? Can I somehow disable iOS’ auto-scrolling after input:focus?!

EDIT Screenshots:

You can clearly see the broken statusbar on the right.

Create app with Framework7 CLI, all such problems already solved there http://framework7.io/cli/

Okay thank you, will have a look. Will create a minimal app and see what you guys are doing to solve this. :slight_smile: