[BUG] scroll up glitch when setting `initialTopMostItemIndex` in Some Mobile Browsers and Webviews

Describe the bug I have implemented basic scroll restoration in a virtuoso list by setting initialTopMostItemIndex which seems to work well EXCEPT in Mobile Chrome and iOS Safari Webviews.

The behavior is such that scrolling up and down is smooth, unless initialTopMostItemIndex is set. The behavior is such that, let’s say you set the top most item index to 50 – scrolling down works fine, but scrolling up will only let you scroll about an item at a time before the scroll gets interrupted by an unknown bug.

Reproduction I have created a reproduction in codesandbox as well as a snack app which reproduces the behavior.

Here is the sandbox: https://codesandbox.io/s/recursing-ace-j2zvxt?file=/src/App.tsx

I added a button that hides the list so that you can simulate un-mounting the list and mounting it by toggling visibility.

The scroll position at time of unmount is stored in parent component’s state and passed down to restore the scroll.

This issue is reproducible on mobile chrome with just the sandbox.

For the webview reproduction I also created a expo snack with a reproduction here: https://snack.expo.dev/@coincircle/webview-example

I am comfortable with making a PR myself and doing whatever testing/debugging is needed on my end to solve the problem, but I figured I’d bring this up as maybe you might have an idea off the top of your head regarding as to what can be the cause here. It’s quite a strange issue given that webviews are just embedded safari windows, yet this issue is not reproducible in the safari browser, only in a webview (and mobile chrome).

To Reproduce Steps to reproduce the behavior (iOS Webview):

1. Go to Reproduction
2. I recommend installign the Expo Go app from the app store and scanning the QR code to load the reproduction on your iOS device.
3. scroll down to some index in the list
4. click “Toggle List Visibility” to hide the list
5. Click again to show it and be restored toy our original position
6. Scroll up
7. Observe the glitchiness of the scroll

Steps to reproduce the behavior (iOS Chrome Browser):

1. Go to Sandbox
2. scroll down to some index in the list
3. click “Toggle List Visibility” to hide the list
4. Click again to show it and be restored toy our original position
5. Scroll up
6. Observe the glitchiness of the scroll

Expected behavior It should work as it does in chrome desktop etc

[coopermaruyama]

Thanks for the reply – I’ve tested it and indeed, in 2.9.2 does not have this issue

[github-actions[bot]]

🎉 This issue has been resolved in version 3.1.4 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀