Sluggish scroll on chromium based browsers when using many columns

[DaanRoet]

Describe the bug

Trying to render a Tanstack table with around 50 columns and I want to avoid using column virtualization and just stick with row virtualization. Seems like in Edge/Chrome I am getting pretty low FPS (~20 fps or so) once I start adding more and more columns. Weird thing is that this is even the case when I use a small dataset (200 rows) and overscan all of the items. On Firefox however I am getting good performance (~60fps).

Also I noticed that if I convert my code to useWindowVirtualizer() the scrolling performs way better, but unfortunately that doesn't suit my use case.

Your minimal, reproducible example

https://stackblitz.com/edit/tanstack-virtual-2gupur?file=src%2Fmain.tsx

Steps to reproduce

1. add 20+ columns to the table (I did already in the StackBlitz
2. Start scrolling in a chromium based browser

Expected behavior

1. 60fps-ish scrolling

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

Windows 11, Edge v130

tanstack-virtual version

v3.10.8

TypeScript version

No response

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[piecyk]

Thanks for reporting this! I’ll check into the issue soon and see what can be done to improve the performance. Appreciate your patience!

[oshcherbakovv]

I'm facing the same problem

[MatchuPitchu]

In my use case, I could solve the scroll lag when I added the following to the table container:

.container {
  // ... 
  contain: 'paint',
  will-change: 'transform',
}

[DaanRoet]

In my use case, I could solve the scroll lag when I added the following to the table container:

.container {
// ...
contain: 'paint',
will-change: 'transform',
}

Setting the will-change: transform works for me as well, thank you for sharing!

[MatchuPitchu]

@piecyk It would be great if the Tanstack team could figure out why the CSS property is necessary? For me, the lagging only occurred after I revised and refactored our table components. So while it worked smoothly before, I now need this CSS property. That's strange.

[piecyk]

@MatchuPitchu That's interesting! It seems like something might have changed in Chrome recently. When I tested will-change: transform before, I didn’t notice much difference, but I’ll look into it again. Also, another CSS property that can help with virtualization issues is overflow-anchor: none; it can sometimes prevent unexpected scroll. I’ll experiment with these and let you know if I find anything useful!

[MatchuPitchu]

Thank you. During the test I noticed that the lagging in Edge was much less, even without the CSS property. This confirms that it could have something to do with Chrome.

Do you mean or on the items?

.container {
  overflow-anchor: none;
}

[piecyk]

@MatchuPitchu directly on each item.

[soliyapintu]

@piecyk, I’m still experiencing sluggish scrolling when using the scrollbar. However, when I scroll using the Shift key combined with the arrow keys, the issue is significantly less noticeable.

[vansh3476]

@soliyapintu facing same issue. @piecyk any solution?

[wwesolowski]

@piecyk my issues still persists, I have like 20 FPS on scrolling and elements load with delay

[piecyk]

@soliyapintu @vansh3476 @wwesolowski just to be on same page, basic combining react-table with react-virtual everyone experiencing these problems?

[vansh3476]

@piecyk Unfortunately, yes. The scrolling behavior is smooth in Firefox and Edge, but it is sluggish in Chrome. Additionally, I have sticky columns on both the left and right sides. Does react-virtual provide any functionality to handle sticky columns?

[soliyapintu]

@piecyk Yes facing same problem.