(iOS) Sometimes scrolling body and not .page div

Twisterking · April 25, 2019, 9:46am

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.

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

nolimits4web · April 25, 2019, 3:12pm

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.

Twisterking · April 26, 2019, 6:49am

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.

nolimits4web · April 26, 2019, 8:01am

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

Twisterking · April 26, 2019, 8:13am

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

nolimits4web · April 26, 2019, 8:15am

github.com

framework7io/framework7-cli/blob/master/create-app/templates/common/cordova-app.js

var cordovaApp = {
  f7: null,
  /*
  This method hides splashscreen after 2 seconds
  */
  handleSplashscreen: function() {
    var f7 = cordovaApp.f7;
    if (!window.navigator.splashscreen || f7.device.electron) return;
    setTimeout(() => {
      window.navigator.splashscreen.hide();
    }, 2000);
  },
  /*
  This method prevents back button tap to exit from app on android.
  And allows to exit app on backbutton double tap
  */
  handleAndroidBackButton: function () {
    var f7 = cordovaApp.f7;
    if (f7.device.electron) return;
    cordovaApp.backButtonTimestamp = new Date().getTime();

This file has been truncated. show original