search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.16k stars 299 forks source link

[BUG] Broken list with dynamic-height rows when scrolling fast using scroll control #1010

Closed rus-yurchenko closed 9 months ago

rus-yurchenko commented 9 months ago

Describe the bug The list can't position its items and display them in the viewport for some reason. Once it happens, it's impossible to interact with the list until its dimensions aren't changed to trigger recalculation. The list remains broken even by scrolling back and forth with the scroll control until some recalculation point is triggered.

Reproduction https://codesandbox.io/s/mnw69z

To Reproduce Steps to reproduce the behavior:

  1. Open Firefox on Mac.
  2. Go to the link above
  3. Grab the scroll control and move it fast to the bottom of the list
  4. See that the list is empty or half-empty and stuck. It's not possible to scroll the list anymore without the scroll control.
  5. The list can be restored by resizing the browser but can be broken in the same way again.

Expected behavior The list should adequately react to fast changes using scroll controls.

Recording https://www.dropbox.com/scl/fi/absjr78uguwrigmjgvhai/Screen-Recording-2023-11-21-at-14.57.00-copy.mov?rlkey=jwfwsbk4ra79zxz36mdr6zrch&dl=0

Desktop

Additional context Please note I don't refer to the delayed or jank rendering when you scroll fast. In that case, list items are shown sooner or later. There are also no margins on the elements that can cause sizing issues.

petyosi commented 9 months ago

I'm afraid that this is not fixable, up to my knowledge. Grabbing the scroller apparently does not allow the container resize to take effect on FF. Interestingly enough, I can't reproduce the problem on Chrome/Mac.

rus-yurchenko commented 9 months ago

Sorry to hear that. The problem is primarily reproducible on Firefox. Anyway, thank you for a quick reply.