Jerky scrolling with variable row heights in Virtual table
CamJohnson26 opened this issue · comments
Is there an existing issue for this?
- I have searched this repository's issues and believe that this is not a duplicate.
I'm using ...
React Grid
Current Behaviour
We use the Tree Plugins to render short section rows, along with tall normal rows in a VirtualTable:
https://codesandbox.io/s/rough-sunset-1pg68t?file=/src/App.js
In the demo above, if you expand a few rows and scroll vertically you'll notice the grid jumps around, when in version 3.0.4 it would scroll smoothly. Currently we're calculating the estimatedRowHeight from the average of visible row heights, but other values show the issue even more strongly.
We logged a similar issue in the past but it was fixed in the current version:
https://supportcenter.devexpress.com/ticket/details/t1108194/reactive-grid-is-flickering-with-detail-row-and-virtual-table
#3583
The only documentation I see around estimatedRowHeight is here: https://devexpress.github.io/devextreme-reactive/react/grid/docs/guides/virtual-scrolling/ Which just says it should match the row height, and a single comment in the Typescript type defs that say to use the average row heights if the rows are varying widths.
Expected Behaviour
VirtualTables should scroll smoothly when the row heights vary.
Steps to Reproduce
https://codesandbox.io/s/rough-sunset-1pg68t?file=/src/App.js
Open this link, expand the middle 2 rows, try to scroll. You'll notice it jumps around instead of scrolling smoothly.
Environment
- devextreme-reactive: 4.0.3
- react: 18.2.0
- browser: Brave latest, Chrome latest
- material-ui: 5.11.15
@VasilyStrelyaev, @timbset, @Lykoi18, @Krijovnick (with recent commits to master) – are you able to weigh in on this issue or at the very least let us know what additional information we can provide? This has become a high severity incident for us, blocking our ability to upgrade to React 18.
