react-virtualized
react-virtualized copied to clipboard
bvaughn
Blinking scrollbars on full page examples on Chrome
Some of the examples which display full page table have broken scrollbar behavior. for instance: https://rawgit.com/bvaughn/react-virtualized/master/playground/hover.html https://rawgit.com/bvaughn/react-virtualized/master/playground/grid.html
The scrolls appear and disappear maybe a hundred times per second.
I've noticed this on Chrome (exact version: 59.0.3071.115) on Win7.
It works fine on FF.
I don't know if this is a bug in example code or the table component itself. Either way, this is discouraging. for someone like me who is evaluating various table components for use in a project.
I've never seen the behavior you describe. (I don't see it now either, just double checking.)
Perhaps a browser bug?
What OS did you try on? My teammate checked today on his Chrome / Win7 and he faced the bug as well. Maybe it does not happen on Mac, where scrollbars behave differently, but I don't have any at hand now to verify there.
I've just realized the issue doesn't happen to me either when I have browser window maximized. I can recreate however when I resize browser to some other size.
For instance on the grid example these values of document.body.clientWidth + 'x' + document.body.clientHeight cause blinking:
773x690777x690810x614
but these are OK:
810x7071024x7541536x771
Update: I've opened another tab and got back, the blinking is gone, but after some further resizing appeared again. I don't know anymore if there are some dimensions that guarantee 100% recreatability. The recreations steps seems to be just: try to resize the browser to various sizes for a while.
Is happening the same with a MultiGrid and InfiniteScroll that I have integrated in my application. Don't know how to replicate the behavior.
I think it was related to the parent being able to scroll. So what I did to solve the problem was to make the parent overflow: hidden, in that way I don't get the flickering scrollbars. Hope it helps.
Ah! Good point @tomasfrancisco. I have run into that before also when a parent was overflow: "auto"
This may be related (if not I'll create a new issue). There seems to be a padding-right of 15px applied from the 'scrollwidth' evaluation at https://github.com/bvaughn/react-virtualized/blob/master/source/Table/Table.js#L694. This can result in the the scrollwidth being:
set in state -> re-rendered -> re-evaludated -> set in state -> re-rendered... loop
If I set the width to be width={width-15} in table props I can stop the blinking, but the header row has the padding-right.
I am using InfiniteLoader wrapping AutoSizer wrapping Table and the header cells are receive the following style:
{
flex: 1 1 80px;
min-width: 80px;
}
EDIT
Fixed by implementing custom headerRowRenderer described here https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#headerrowrenderer and it simply strips out the paddingRight style prop that is passed in.
We were able to solve this problem with our use of the AutoSizer and List component by setting overflow-y: hidden; on the parent container, similar to @tomasfrancisco's solution.
I encountered this issue and fixed it in a similar way to @miketmoore. I had
<html><body><div id="react-root"> and inside react root was essentially <div /><div /><div id="wrapper"><AutoSizer /></div>
html, body, #react-root {
height: 100%;
width: 100%;
}
#react-root {
display: flex;
flex-direction: column;
}
#wrapper {
flex: 1 1 auto;
}
adding overflow-y: hidden; to #wrapper or adding another div after #wrapper seemed to fix the flickering
This appears to be related to "OS level scaled displays" (at least in our case), for example external 4K displays, or high resolution "retina" displays in MacBooks. I can actually even move the Chrome window between a scaled display (internal MacBook) and an external non-scaled monitor to make the flicker appear and disappear on the fly.
Also as stated setting overflow: hidden; on the parent element does work around this bug happening.
