-
-
Notifications
You must be signed in to change notification settings - Fork 313
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sluggish scroll on chromium based browsers when using many columns #860
Comments
Thanks for reporting this! I’ll check into the issue soon and see what can be done to improve the performance. Appreciate your patience! |
I'm facing the same problem |
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 |
@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. |
@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! |
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;
} |
@MatchuPitchu directly on each item. |
@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. |
@soliyapintu facing same issue. @piecyk any solution? |
@piecyk my issues still persists, I have like 20 FPS on scrolling and elements load with delay |
@soliyapintu @vansh3476 @wwesolowski just to be on same page, basic combining react-table with react-virtual everyone experiencing these problems? |
@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? |
@piecyk Yes facing same problem. |
@piecyk tanstack table + tanstack virtual |
+1, extremely laggy scrolling on Chromium-based browsers, but it seems like there is no issue at all on Firefox-based ones. I can also confirm that putting the |
thank you the |
Hi! |
After extensive debugging and analysis, I observed that rendering simple text resolves the lagging issue. |
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
Expected behavior
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
The text was updated successfully, but these errors were encountered: