React-virtualized: Blinking scrollbars on full page examples on Chrome

Created on 10 Aug 2017 · 13Comments · Source: bvaughn/react-virtualized

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.

bug help wanted

Source

tymekg

Most helpful comment

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

Blinking_Scrollbar

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.

screen shot 2017-12-12 at 17 46 34

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.

JRGranell on 12 Dec 2017

👍6

All 13 comments

I've never seen the behavior you describe. (I don't see it now either, just double checking.)

Perhaps a browser bug?

bvaughn on 10 Aug 2017

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.

tymekg on 11 Aug 2017

OS X, but with scrollbars set to "always on"

bvaughn on 11 Aug 2017

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:

773x690
777x690
810x614

but these are OK:

810x707
1024x754
1536x771

tymekg on 16 Aug 2017

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.

tymekg on 16 Aug 2017

This sounds a lot like a browser bug to me.

bvaughn on 16 Aug 2017

Is happening the same with a MultiGrid and InfiniteScroll that I have integrated in my application. Don't know how to replicate the behavior.

tomasfrancisco on 31 Aug 2017

@tymekg Did you find a solution? I'm seeing similar issues.

K-Leon on 11 Sep 2017

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.

tomasfrancisco on 11 Sep 2017

👍4

Ah! Good point @tomasfrancisco. I have run into that before also when a parent was overflow: "auto"

bvaughn on 11 Sep 2017

set in state -> re-rendered -> re-evaludated -> set in state -> re-rendered... loop

Blinking_Scrollbar

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.

screen shot 2017-12-12 at 17 46 34

I am using InfiniteLoader wrapping AutoSizer wrapping Table and the header cells are receive the following style:

{
    flex: 1 1 80px;
    min-width: 80px;
}

JRGranell on 12 Dec 2017

👍6

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.

miketmoore on 8 Jun 2018

❤3

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