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(
  <WindowScroller>
    {({ height, isScrolling, scrollTop }) => (
      <List
        autoHeight
        className='List'
        width={300}
        height={height}
        rowCount={totalRowCount}
        rowHeight={rowHeight}
        scrollTop={scrollTop}
        rowRenderer={
          ({ index, isScrolling, key, style }) => (
            <div
              className='Row'
              key={key}
              style={style}
            >
              {"Item " + index}
            </div>
          )
        }
      />
    )}
  </WindowScroller>,
  document.getElementById('example')
);

[alexyaseen]

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?

[barbu110]

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!