[BUG] Reverse List endless scrolling flickering and rangeChanged jumps (iOS / Safari)
agamrp opened this issue · 9 comments
Describe the bug
When prepending on a reverse list, I am getting flickering when startReached is called while scrolling up. Sometimes also the list will jump to the top of the newly prepending items instead of keeping the original position before calling startReached.
This is reproducible for me on iOS and Safari, harder to reproduce on my desktop.
While printing out the rangeChanged values, I also noticed on iOS that the startReached will get called sometimes before top of the list is actually seen and so when virtuoso tries to restore the original scroll position it will be in the wrong place (e.g. a couple of items below the top of the list before startReached called).
Help would be appreciated if there is a workaround the flickering / jumping or to make sure I'm not doing something dumb.
Reproduction
Run the below sandbox on iOS using Safari and scroll up to load new data.
https://codesandbox.io/s/sandpack-project-forked-sfoy90?file=/App.js
Expected behavior
I thought the list would stay in the original scroll position while loading items on top.
Screenshots
Blinking.And.Jumping.720.mov
Desktop (please complete the following information):
- OS: iOS 15
- Browser: Safari
This is real, and can be reproduced in the site example as well. I'm afraid that I haven't found a reliable way to address that. As far as I have discovered, Safari just ignores scrollTo/scrollBy calls during kinetic scrolling. You may try disabling kinetics with CSS, but it's not a trade off I would enjoy as an user.
Closing this because I'm not aware of any approach that could address it.
@petyosi How are you disabling kinetics on Safari? We're running into this issue as well and I don't believe there is anyway to disable kinetics on Safari 15.
'-webkit-overflow-scrolling' was removed from Safari two major versions ago - https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-overflow-scrolling.
These are the release notes where the css was removed - https://developer.apple.com/documentation/safari-release-notes/safari-13-release-notes
Yep, my info is old then, because that's the prop I had in mind. Google finds few JS libs that claim to stop it through event handling, but I haven't tested so I would rather not recommend.
Appreciate your reply! I was hoping there was a solution I overlooked.
Unless there is an approach I've missed, there doesn't seem to be any reliable method to disable kinetic scrolling on Safari anymore. As an aside, the issue isn't limited to iOS, it appears to happen on Safari on the Mac as well.
Do you have any other thoughts on an approach that might minimize the occurrence of the jumping?
Hi @petyosi @agamrp @amitkumar01 I came across the same problem, were you able to find any solution to this problem?
Hi @petyosi, is there anywhere we can find information about this Safari bug? Right now, our app is completely unusable on iOS + reverse scroll + dynamic height items.
https://codesandbox.io/s/gv2fdy?file=/App.js&utm_medium=sandpack
RPReplay_Final1687548004.mov
@danielsantiago I have not discovered anything additional to what I've shared here. I doubt that this would be considered a bug, I believe it's a deliberate implementation from Apple.
I believe it's a deliberate implementation from Apple.
Yes, but I think it could be a fix or workaround for that, recently I changed to tanstack-virtual and with tanstack-virtual I don't have this flickering issue on iOS.
Still sometimes it stop smooth scrolling but It's more usable than virtuoso
I hope one day this issue will be fixed in virtuoso like tankstack-virtual.