petyosi / react-virtuoso

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

Drag the scrolllbar makes the grid blink in Firefox, but not in Chromium or Edge... #1088

Closed c0d3rm0n closed 3 months ago

c0d3rm0n commented 3 months ago

Description

I'm using Virtuoso Grid in my project to display a grid (20x60 with up to 20M items, each item has a small value) and it works well if I navigate the grid using the mouse scroll wheel. It is fast and responsive. But, in Firefox, if I drag the scrollbar, in fast movements or bigger jumps, the grid blinks (all grid is gone) and then it renders all the elements.

Reproduction

It is possible to test here: https://virtuoso.dev/grid-responsive-columns/ Just increase the value of totalCount, and adjust width and padding of Item and ItemWrapper, so you display more items.

To Reproduce

Steps to reproduce the behavior:

  1. Just drag the scrollbar...

Expected behavior

Just do the same using Chromium and Edge. It works well, as intended.

Videos

Firefox: https://github.com/petyosi/react-virtuoso/assets/166708796/f75eaee2-9d24-4541-ba59-843b3512d598 Chromium: https://github.com/petyosi/react-virtuoso/assets/166708796/a74dbac5-76b9-40d0-9e5e-a1eb2ca7f9c3

Extra info

petyosi commented 3 months ago

Given that this is a pure temporary visual glitch and the dropping Firefox percentage, I'm unlikely to look into that. Feel free to investigate and submit a PR.

P.S. It's not that I dislike Firefox in anyway, but my capacity is limited and I can't prioritize it.