[BUG] iOS calling startReached multiple times

[elijahiuu]

I tried out the prepend demo in iOS and noticed that it is doing something odd. It's likely the same issues others have reported about flickering and content repositioning on iOS. This happens on iOS/webview and iOS Safari. But does not happen on Safari desktop, Chrome desktop.

In the demo, I added a console to print out startReached callbacks. On iOS they happen twice, back to back. Also notice errors coming out from ResizeObserver: "ResizeObserver loop completed with undelivered notifications."

Reproduction
https://codesandbox.io/s/sandpack-project-forked-5sm13u?file=/App.js:1161-1173

To Reproduce
Scroll up slow, or fast, it doesn't matter. Once you reach the top element, startReached will get called twice.

Expected behavior
Only a single startReached call should be made.

Screenshots
https://user-images.githubusercontent.com/7199597/195153219-2c27333b-3a31-4961-a52a-df90c4796d65.mov

OS:
iOS 15.2

I am using virutuoso in a bigger project and noticed these issues where the atTopStateChange/startReached would be called muliple times (2, 3 times), causing terrible rerenders and content jumping. I reduced the problem back to just the original demo from the docs and noticed that the same kind of problems exist there too.

[petyosi]

This is a valid reproduction, I will look into it further but there's a chance it is not fixable. Prepending items works by calling scrollBy to return the scroller to the location before the items are added. iOS sometimes ignores those calls.

[petyosi]

@elijahiuu can you try that on iOS 16? Here's how it works on my side:

Screen.Recording.2022-10-18.at.15.08.35.mov

Given the fast update cycle of iOS, I think it will be solved pretty soon.

[elijahiuu]

@petyosi Thank you so much for looking into it. I ran on iOS 16 and indeed it behaves differently. I'm surprised.
In my project, I am actually using a couple extra props to make the scroll a little smoother. I tried various combinations of the code below. It is very smooth on desktop, but iOS 16 it is not. There is a good amount of pause between rendering in prepended batch and continuing the scroll motion.

      // increaseViewportBy={{
      //   top: 500,
      //   bottom: 500
      // }}
      // overscan={{
      //   main: 300,
      //   reverse: 300
      // }}
      atTopStateChange={(isTop) => {
        if (isTop) {
          prependItems();
        }
      }}
      atTopThreshold={600}

https://codesandbox.io/s/sandpack-project-forked-puqz56?file=/App.js

What settings would you recommend for a smoother scroll on iOS?

[Noah-JJ]

you can try
style={{ height:100, overscrollBehavior: "none" }}