[BUG] iOS Safari glitch on scroll up to items of unknown height
aeharding opened this issue · 9 comments
Describe the bug
When scrolling up to items of unknown height in iOS Safari, the grid appears to glitch briefly as items are mounted.
This does NOT happen:
- When scrolling down
- On desktop MacOS
- When items have known height, either from being mounted previously or given explicit height
Reproduction
https://codesandbox.io/s/optimistic-blackwell-5pnlx7
To Reproduce
Steps to reproduce the behavior:
- Visit https://5pnlx7.csb.app on iOS device through the Safari app
- Scroll up
- Observe there is some glitching
Expected behavior
No item shift/glitching upon scrolling up.
Screenshots
RPReplay_Final1689112388.MP4
Additional context
This glitching is also visible, although much, much less obvious (due to small size variance and white bg) on https://virtuoso.dev/prepend-items with iOS Safari.
I am using this great library for the new FOSS project I've been working on, Voyager, a Lemmy client. I know $100 one-time isn't much, but it's a good amount of the sponsorship money I've received so far and as I continue to receive github sponsor money from Voyager I plan on forwarding a portion to you because this project makes Voyager possible so thank you!
Hi @aeharding ,
As much as I want to fix that problem, I have not found a way to do so :(. It's a limitation of the mobile Safari browser. my guess is that Apple has done that for the sake of preserving the scrolling experience of the end-user. Here's a thread from long ago, not like there's anything more in it, though: #598.
I looked through the description of Voyager, and I understand that this is a mobile-first project. A glitch like this is not a pleasant experience for the iOS user, so I am not sure if this won't turn into a showstopper for your adoption of the library.
I can't refund your sponsorship, but I have sent you the $100 back as a sponsorship. Again, I'm sorry that I can't figure this problem out. HUGE thanks for your understanding and for your appreciation of my work.
P.S. I will think through the Safari over the next few days but don't count on it, please.
@aeharding I faced this same issue, and because my use case is in a hybrid app with capacitor it is critical that it runs smooth..
I found that setting overscan to something around 2x the height of the virtual list makes it less noticeable. In my case I have the list fill the entire scree so I set overscan={windowHeight * 2}
@aeharding @jsnanigans it took me a component rewrite to find a way to fix this, but I'm quite happy to say that the reverse scrolling of the Virtuoso Message List component works much better in iOS.
@petyosi that is amazing news, thank you so much for the hard work! Do you know what the issue was? I would be interested in how you fixed it
@jsnanigans in a nutshell, Safari is just acting in a completely irrational way, ignoring API calls, and selectively/partially accepting values. The solution I found was a combination of workarounds and adjustments done for scrolling in progress / scrolling complete.
My gut feeling is that they are doing that so that the developer can't accidentally break the scroll kinetics.
Great fix! Are these changes related to the fix solely in the new Message List Component, or are they also part of the regular list?
@jord-nijhuis the fix is only present in the message list. If you're doing reverse scrolling in general, I recommend giving it a try. I've taken a new state management and rendering approach there, it allowed me to address several long standing problems with the current implementation.