infinite-tree icon indicating copy to clipboard operation
infinite-tree copied to clipboard

Computing row height using offsetHeight causes rounding errors

Open JZacaroli opened this issue 2 years ago • 0 comments

I have found a couple of ways to demonstrate this issue.

The easiest way is to go to the demo page, click on an item in the tree, then hold the 'Down' key. Over time, the selected element will start to be scrolled off the page. When the DOM changes to load the next cluster of nodes, the selection will then jump back into view.

What's happening is that itemHeight is calculated using offsetHeight, which rounds to the nearest integer. This is used to calculate where to scroll to. As the rounding error is multiplied, the selection disappears off screen. When the DOM changes, the size of the blank rows now also contain the rounding error, which is why the selection jumps back into view.

When scrolling normally, this also causes the tree to jump down by the rounding error at cluster boundaries. The flickering issue happens when you have scrolled to the bottom and the tree thinks it should switch to the next cluster, but there's not enough space to jump by the rounding error, because it's at the bottom already. So the tree then switches clusters to the previous one. And this goes on indefinitely. I can reproduce this on the demo by opening nodes and scrolling to the bottom repeatedly. You have to get a bit lucky but you can hit it.

To fix: From Mozilla: [offsetHeight] will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

JZacaroli avatar Sep 01 '23 15:09 JZacaroli