search

bvaughn / react-window

React components for efficiently rendering large lists and tabular data
https://react-window.now.sh/
MIT License
15.72k stars 782 forks source link

Poor performance when scrolling with Chrome or Safari #652

Closed marcotisi closed 2 years ago

marcotisi commented 2 years ago

Scrolling performance has declined significantly when using the latest version of Chrome (v102) or Safari (v15.4). This happens only if you scroll using the mouse wheel or the keyboard, it works when using scrollbars. In addition, when scrolling using the keyboard, the table loses its focus after a random number of scrolled rows.

Chrome:

https://user-images.githubusercontent.com/2930004/172585611-be2b185f-1667-4c2a-9a1a-97eb2deba4ae.mov

Safari:

https://user-images.githubusercontent.com/2930004/172585668-874564ca-f923-4bf5-82cb-dd7e5eeeacf2.mov

This issue does not occur using the latest version of Firefox (v101), as you can see from this video:

https://user-images.githubusercontent.com/2930004/172586206-37966635-6c10-441c-8635-d02c9b0767a6.mov

The table is the one from this example: https://react-window.vercel.app/#/examples/list/fixed-size

chriswoodley commented 2 years ago

I can confirm that I am having the same issue.

dfrsol commented 2 years ago

Ditto - as per the issue in TanStack it appears to be an issue with the latest version of Chromium see https://bugs.chromium.org/p/chromium/issues/detail?id=1332962

jackblanc commented 2 years ago

I am also experiencing this issue, has anyone found a workaround?

chandlerprall commented 2 years ago

The linked chromium bug was marked as a duplicate of another bug stating the issue was resolved in canary builds. I grabbed the latest canary and our react-window usages work as expected there. Looks like it may be 2 or 3 major Chrome releases away, however (chromium issue said v104, I grabbed v105, current Chrome is v102).

marcotisi commented 2 years ago

Closing this issue as it's not directly related to react-window