Rendering lag when using virtualised for both rows and columns along with Tanstack/table

[danprat92]

Describe the bug

I'm currently using table + virtual in this example here

Blank page is shown when scrolling horizontally and vertically, lots of warning that scroll handler took too long

Your minimal, reproducible example

here

Steps to reproduce

Can be reproduced in this example here

Scroll vertically and horizonally causes blank screen, lots of scroll handler warnings about taking too long to execute it

Expected behavior

No blank page shown

How often does this bug happen?

Every time

Screenshots or Videos

https://github.com/TanStack/virtual/assets/9660071/7090b066-7515-4af8-a3d7-398f0c900ff3

Platform

macOS

tanstack-virtual version

3.1.1

TypeScript version

No response

Additional context

Table: 8.12.0

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] 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.

[hahatulk]

important notice on windows this happens only when table is hardware accelerated, but still bad performace without hardware acceleration it just scrolls very laggy

[Sphinm]

This situation is also obvious on mobile phone devices

[Muhammad-bK]

I am using Material React Table which uses TanStack Virtual for virtualization and I am experiencing this same problem

[NeerabhKr]

Add this style to your parent div where you put overlow scroll , this is working fine for me -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

[hahatulk]

Add this style to your parent div where you put overlow scroll , this is working fine for me -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);

This is not solution. It is just telling browser not to wait render of rows and continue scrolling. Rows are still rendered very slow

[cmachu]

I have same problem with Material React Table. Method maybeNotify can take up to 400ms with large datasets. I have tried different configuration of Virtualizer, but nothing helps. Any solution?

[romlacerda]

Any solution???

[piecyk]

Any solution???

@romlacerda is this happening more?

@danprat92 can you update virtual to latest, or covert the example to https://stackblitz.com/

[romlacerda]

Any solution???

@romlacerda is this happening more?

@danprat92 can you update virtual to latest, or covert the example to https://stackblitz.com/

@piecyk Unfortunately, yes.