React-virtualized: WindowScroller: Compression mode renders glitchy while scrolling.
When using the WindowScroller with List and having the grid height exceed the 1.5 million pixel threshold (aka compression mode), the scrolling is glitchy. Rows appear on top of each other as well as white space at the top.
This seems to be only when using the bar arrows or the mouse wheel to scroll, not dragging the bar handle which is fine.
Also it seems to get worse the greater the height, if it's just above the threshold it appears to work fine.
All browsers tested have this issue: Chrome, Firefox, IE 11.
https://plnkr.co/oskmhXrKvQ9foB2gVQDq
Code (from the plnkr):
```
var WindowScroller = ReactVirtualized.WindowScroller;
var List = ReactVirtualized.List;
// Enough rows to comfortably exceed the 1.5 million pixels threshold
// If it's just above this then it seems to work fine
var totalRowCount = 100000;
var rowHeight = 30;
// Render your list
// (The initial render looks good, but breaks when scrolling)
ReactDOM.render(
{({ height, isScrolling, scrollTop }) => (
className='List'
width={300}
height={height}
rowCount={totalRowCount}
rowHeight={rowHeight}
scrollTop={scrollTop}
rowRenderer={
({ index, isScrolling, key, style }) => (
key={key}
style={style}
>
{"Item " + index}
)
}
/>
)}
,
document.getElementById('example')
);
jayryemure
All 10 comments
Hm. Good find!
I don't use WindowScroller myself for anything so it hasn't been tested quite as thoroughly as the other components. If you'd be willing to lend a hand with this, I'd love the help. 馃槃 Have my hands pretty full at the moment.
bvaughn
on 14 Feb 2017
Thanks for the reply.
For the time being, if it helps anyone looking into this, the issue appears to occur at least back to version 8.9.0.
jayryemure
on 15 Feb 2017
I just found this also (with Table), fortunately I don't think I really need such large data displayed in practice. Concur that it is happening with keyboard or mousewheel nav and not scrollbar dragging.
nwolverson
on 23 Feb 2017
I found similar behavior also when using Grid and it got worse when used in MultiGrid. Chrome 57 on Windows 8.1, react-virtualized 9.7.3
ptomask
on 15 Apr 2017
I ran into a similar problem trying to implement custom scrollbars on a Grid component. I was able to fix it by forcing the isScrolling prop on Grid to true when height exceeds 1.5m pixels. I'm not entirely sure of the performance implications, but it seemed to work for now.
It looks like it works in this case as well, see: https://plnkr.co/edit/D5DWaaIkIzuVT7Id4oyI
In an effort to help find a less hacky solution, I found that a setting in my custom scrollbar implementation also fixed the problem (setting renderByPixels to false in https://github.com/idiotWu/react-smooth-scrollbar). Perhaps this may be a clue as to what is causing the problem with WindowScroller?
alexyaseen
on 3 May 2017
@alexyaseen Good stuff, and seems to work on MS Edge too!
jayryemure
on 3 Jul 2017
This might actually be user error on my part. If I simply set the grid's isScrolling prop to the isScrolling parameter passed by WindowScroller it seems to work perfectly fine, which might be expected anyway in order to tie the two components together.
Worth a close? Forked Plunker showing the correction:
https://plnkr.co/edit/N52CCc8BsAHC47PsLGEB?p=preview
jayryemure
on 5 Jul 2017
If I simply set the grid's
isScrollingprop to theisScrollingparameter passed byWindowScrollerit seems to work perfectly fine, which might be expected anyway in order to tie the two components together.
Ah, yes! That _is_ how the 2 are intended to work together and is important for style-caching reasons.
bvaughn
on 5 Jul 2017
Thanks for the update @jayryemure! I think in light of this recent update, I'm going to close this issue. If you have any suggestions for improving the docs to make this clearer for others- I welcome them!
bvaughn
on 5 Jul 2017
Hi! I am having the same problem with Table and WindowScroller. The behavior is, however strange: when I scroll down and reach the bottom of the header row (almost), The first one or two rows are not visible anymore. If I scroll up, they become visible until I scroll down again.
While I was trying to take a screenshot to show you, I resized the browser's width and seen that the rows do not hide on scrolling anymore. Could you guide me through debugging this please? Is it on my end or is this a problem here? Thanks!
barbu110
on 4 May 2018
Related issues
pkumar84
路
4Comments
barbalex
路
3Comments
djeeg
路
3Comments
hyeminHwang
路
3Comments
ms007
路
4Comments
Most helpful comment
I ran into a similar problem trying to implement custom scrollbars on a
Gridcomponent. I was able to fix it by forcing theisScrollingprop onGridtotruewhen height exceeds 1.5m pixels. I'm not entirely sure of the performance implications, but it seemed to work for now.It looks like it works in this case as well, see: https://plnkr.co/edit/D5DWaaIkIzuVT7Id4oyI
In an effort to help find a less hacky solution, I found that a setting in my custom scrollbar implementation also fixed the problem (setting
renderByPixelstofalsein https://github.com/idiotWu/react-smooth-scrollbar). Perhaps this may be a clue as to what is causing the problem withWindowScroller?