question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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:

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:closed
  • Created 4 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
liamdebeasicommented, Oct 25, 2019

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!

1reaction
JumBaycommented, Oct 23, 2019

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 😉

Read more comments on GitHub >

github_iconTop Results From Across the Web

bug: ios13 infinite scroll loading more entries makes page ...
When you scroll down, new entries get loaded and added to the list and the page jumps to the top. The user has...
Read more >
Infinite scroll and will_paginate appending the 'next page ...
When a user scrolls down to the bottom of the page an new set of items is appended and the page extends, however...
Read more >
Infinite List Scroll with SwiftUI and Combine
Infinite scrolling is a UX pattern which loads content continuously when users scroll down the screen. An example of an infinite list that ......
Read more >
Building An Infinite Scroll Into Your React App
Infinite scroll is a feature where data is loaded onto the user's page when the user reaches the end or almost the end...
Read more >
Implementing an infinite scrolling list with SwiftUI and ...
If this is one of the last items in the data source, we can kick off a page load and add more items...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found