Ionic-framework: [4.0.0-rc.0] Scroll Bug in Safari

[kamilersz]

[x] bug report
[ ] feature request

Current behavior:
sometimes got scrolled when <ion-content> is scrolling, resulting

Expected behavior:
Scroll should be just inside the <ion-content>

Steps to reproduce:

1. create project using tab-layout starter
2. create scrolling content on one tab
3. open ionic using safari

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.6.0 (C:\Users\kmzin\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.11.4
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : not available
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 6 other plugins)

System:

   Android SDK Tools : 26.1.1 (D:\MyProgram\Android\SDK)
   NodeJS            : v10.13.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.4.1
   OS                : Windows 10

[paulstelzer]

I don't understand what you want to say. Could you please add a video or something else?

[kamilersz]

see this 1st video, testing on safari
https://www.dropbox.com/s/lvwavn8rsascsgi/ionic-scroll-safari-bug-1st-video.mp4?dl=0

as you can see, scroll stopped for about 3 seconds after user tried to scroll from top navbar / bottom tab navigation

then the 2nd video, testing on safari with "Add to Homescreen" feature
https://www.dropbox.com/s/29x7ramffdn27e9/ionic-scroll-safari-bug-2nd-video.mp4?dl=0

it is showing small scrollbar here when scroll got stuck

disabling rubberband scroll on full height component might work to fix this

[Scobee]

@kamilersz - did you manage to find a fix for this ?

[bitflower]

Got the same behaviour:
https://www.dropbox.com/s/dvnn901hb5qauy6/ionic-4.1.1-scroll-bug-ios12.MOV?dl=0

I've posted this on Slack:
"Anybody using ion-content and having scrolling issues? When scrolling all the way up or down then let the smooth scroll “calm down”? And then try to scroll fast up and down => the content won’t move. As long as you let it alone for a few seconds… It’s actually having trouble scrolling up SLOWLY from bottom when the content calmes down at the very bottom."

[bitflower]

Just checked forceOverscroll does not solve this for me either being true or false.

[bitflower]

If you go to https://docs.deckdeckgo.com/docs on an iPhone you can see the effect too. Thanks for the hint @peterpeterparker

[alexwolfwang]

This is still a problem.

[qrcodemonkey]

I am working on a PWA and also do have the freezing scroll issue on iOS (Android works fine). It mostly happens when I scroll a list. I can always replicate this behaviour when I start touching the ion-header and move down my fingers to the ion-content area to scroll up a list (tested on iOS 12.2 with an iPhone 6). I also tested this behaviour with the official conference example app and had the same problem: https://github.com/ionic-team/ionic-conference-app#progressive-web-app

This is currently a big problem to release a PWA for iOS because it will end up in bad usability and frustrated users.

[qrcodemonkey]

I think the problem is related to this webkit bug: https://bugs.webkit.org/show_bug.cgi?id=169509

[AkshayKanchan]

Facing same problem, can anybody suggest a workaround?
Thank You.

[qqilihq]

We're having this problem as well -- a PWA built this way has a horrible usability and users will assume the app did “freeze”.

Could we at least get a statement from the Ionic maintainers -- is this on your radar, is this something which might get fixed, or is the irrelevant to you?

[hwasoocho]

I am using the following hack to get by this.

<!-- Hack to fix ion-content scroll sometimes not working -->
<script>
  document.addEventListener('touchmove', function(event) {
    if (document.body.scrollTop == 0) {
      document.body.scrollTop = 0;
    }
  });
</script>

[ionitron-bot[bot]]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!