bug: ios13 infinite scroll loading more entries makes page scroll to top
See original GitHub issueBug 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 (cordova-lib@9.0.1)
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
Issue Analytics
- State:
- Created 4 years ago
- Comments:5 (2 by maintainers)
Top GitHub Comments
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!
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:
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 😉