[BUG] iOS Safari glitch on scroll up to items of unknown height

[aeharding]

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:

1. When scrolling down
2. On desktop MacOS
3. 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:

1. Visit https://5pnlx7.csb.app on iOS device through the Safari app
2. Scroll up
3. 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!

[petyosi]

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.

[jsnanigans]

@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}

[petyosi]

@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.

[jsnanigans]

@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

[petyosi]

@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.

[jord-nijhuis]

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?

[petyosi]

@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.

[LookRain]

hi @petyosi , great to know that you've addressed these issues. any plans on bringing the solution to the non-commercial version? thanks!

[petyosi]

@LookRain I'm afraid that the (lack of) sponsorship I'm receiving for the non-commercial version does not justify that.