Ionic-framework: bug: ios13 infinite scroll loading more entries makes page scroll to top

[WeCantStopHere]

Bug Report

Ionic version:


[x] 4.x

Current behavior:
On ios 13 loading more entries with Infinite Scroll causes the page to jump to the top. When you scroll down, new entries get loaded and added to the list and the page jumps to the top. The user has then to scroll down all the way again to load even more entries and experience the same jump to the top. It only stops happening once the end of the infinite scroll data is reached and no more entries get added.

Expected behavior:
On android and ios < 13 the infinite scroll works as expected. When you scroll down, new entries get loaded and added to the list. the current scroll position does not change and user can continue scrolling down.

Steps to reproduce:

• Create Infinite Scroll example according to the official documentation
  ( https://github.com/ionic-team/ionic-docs/blob/master/src/demos/api/infinite-scroll/ )
• run on apple ios device as app with most recent ios version
• scroll down to load more data
• the view jumps back to the top as soon as data is added to the view

Related code:

https://github.com/ionic-team/ionic-docs/blob/master/src/demos/api/infinite-scroll/

Other information:

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.2 (C:\Users\xxxx\AppData\Roaming\npm\nod
e_modules\ionic)
   Ionic Framework               : @ionic/angular 4.9.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, browser 6.0.0
   Cordova Plugins   : cordova-plugin-ionic 5.4.4, cordova-plugin-ionic-keyboard
 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 8 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (C:\androidSDK)
   NodeJS            : v10.16.1 (C:\Program Files (x86)\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 7

[liamdebeasi]

Thanks for the issue. Can you provide a repo with the code required to reproduce this issue? I am unable to reproduce this issue on an iPhone running iOS 13.1.3.

[JumBay]

I've got a similar issue on my app, but with angular cdk virtual scroll. I've managed to reproduce it with ionic virtual scroll too.

To reproduce:

1. run https://github.com/JumBay/ionic-issue-scrolltop on a simulator.
2. Scroll to the page
3. click on a card to navigate to another page
4. go back
5. click on the search input, it will automatically scroll to top

Video example: https://youtu.be/1mv0R-utwS8

PS: you can see that it's all buggy when navigating, I've only copy-paste code from ionic doc, but that's not the point here ;)

[jeffreyvdhondel]

Having the same issue with the virtualscroll.

[liamdebeasi]

Thanks for the follow up. I am going to close this as this is a known issue in WebKit. The bug exists in iOS 13-13.1 and is fixed in the iOS 13.2 beta, so this issue should be resolved once that ships. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. 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.