Flickering on reverse when items have wide range of sizes

[mattwondra]

Describe the bug
When there's a lot of variation in item sizes, there can be excessive flickering when items first render. For example, in VList reverse mode, when a very tall row scrolls into view and mounts for the first time, there's often a flickering at the bottom of the viewable area.

I have a reduced test case in mattwondra:virtua:bug/flickering-when-item-heights-vary, here's a demo:

Screen.Recording.2023-11-29.at.12.00.19.PM.mov

To Reproduce

• Grab the Storybook changes from mattwondra:virtua:bug/flickering-when-item-heights-vary
• Go to the "VList > Reverse" story
• Scroll up
• As you scroll new tall items to be mounted for the first time, there will often be flickering at the bottom of the list

Expected behavior

• The viewable content should not flicker
• (It's OK for the scrollbar to change size and jump a bit, I know that's probably not avoidable)

Platform:

• OS: MacOS
• Browser: Chrome, Firefox, & Safari (tested all three)
• Version of react: 18.2.0
• Version of this package: 17.2.0

[inokawa]

A patch was released in 0.17.3.

It will fix the issue in Chrome and Firefox, but still exists in Safari.
In my investigation, Safari seems to have different timing to dispatch updated scroll event when we update scrollTop/scrollLeft imperatively.

[mattwondra]

Thank you @inokawa! I started testing this, but unfortunately hit a regression. I've logged it here: #270

[inokawa]

Oh...I'll check it.
Thank you!

[inokawa]

https://bugs.webkit.org/show_bug.cgi?id=75015 probably not related

[inokawa]

As far as I researched, Safari seems to have 2 tricky behavior (maybe a kind of bug?):

1. Imperative scrollTop update during scrolling sometimes delays. For example, setting scrollTop += 1000 will usually affect the next scroll event, however sometimes not next but after the next in Safari.
2. Imperative scrollTop update during scrolling sometimes delays browser's paint. That means updated items range may not be painted immediately and can cause blank.

[inokawa]

Closing because the remained task is Safari specific, and it will be tracked in another issue.