List flashing/flickering when scrolling down
See original GitHub issueDo you want to request a feature or report a bug?
Reporting a Bug
What is the current behavior?
On Chrome (Version 72.0.3626.96), using a simple List
with static data, scrolling down cause the list and scrollbar to flash and flicker as elements appear to be unmounted and remounted. It happens not just as I am scrolling, but also once I have scrolled down to see the last elements of the list
See the output here https://codesandbox.io/s/1r0lnro7y4
Or look at the code here
import * as React from 'react';
import { List } from react-virtualized;
const TEST_HEIGHT = 25;
const list = [
'item 1',
'item 2',
'item 3',
'item 4',
'item 5',
'item 6',
'item 7',
'item 8',
'item 9',
'item 10',
];
class BrokenList extends React.Component {
render() {
return (
<List
width={200}
height={5 * TEST_HEIGHT}
rowHeight={TEST_HEIGHT}
rowCount={list.length}
rowRenderer={({ index, key }) => {
return (
<div key={key} style={{height: TEST_HEIGHT}}>
{list[index]}
</div>
)
}}
/>
)
}
}
The output:
Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?
Here is my configuration. I tried running this on Safari, and did not see the bug so it could be browser-specific. Haven’t used previous versions of react-virtualized
Browser Chrome 72.0.3626.96 OS MacOS High Sierra React 16.8.0 React-DOM 16.8.0 react-virtualized 9.21.0
Issue Analytics
- State:
- Created 5 years ago
- Reactions:14
- Comments:10
Top Results From Across the Web
React-virtualized, List is Flickkering/lagging when scrolling
Found the solution after reading through the documentation. Just needed to add the style in the "rowRender" method:
Read more >Troubleshoot screen flickering in Windows - Microsoft Support
Scroll down the list and find the app you want to uninstall. Select the app, and then select Uninstall > Uninstall. If you're...
Read more >Slider flashing when scrolling down the webside
Now I have the problem that all pictures flickers to the left or right when I scroll down the page. It's only for...
Read more >Some flickering when scrolling down the answer list
There is some flickering when I try to scroll down the answer list. This happens only the first time when the listview elements...
Read more >Screen flickering while using scroll wheel in web browser ...
It used to be down to the browser you were using. And for some if you had the latest version of adobe flash...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@laura-brouckman I think the cause of this problem is that you aren’t passing the
style
parameter from rowRenderer to the div, like this:Source: https://github.com/bvaughn/react-virtualized/issues/880#issuecomment-345704492
Is there anyway avoiding pass style parameter to rowrenderer to fix this issue?