React-virtualized: List flashing/flickering when scrolling down

[laura-brouckman]

Do 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

[leroydev]

I'm facing the same problem with these versions:
Browser Chrome 72.0.3626.96
OS Windows 10
React 16.5.0
React-DOM 16.5.0
react-virtualized 9.21.0

[leroydev]

@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:

rowRenderer={({ index, key, style }) => {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  )
}}

Source: https://github.com/bvaughn/react-virtualized/issues/880#issuecomment-345704492

[LOGANLEEE]

Is there anyway avoiding pass style parameter to rowrenderer to fix this issue?

[osama-uxbert123]

@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:

rowRenderer={({ index, key, style }) => {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  )
}}

Source: #880 (comment)

It worked for me

[pthieu]

My html structure is a bit more complicated than a div, should I be passing the style to the root element in the rowRenderer? Or should I be passing it deeper?

[JasonXiaoSpace]

@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:

rowRenderer={({ index, key, style }) => {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  )
}}

Source: #880 (comment)

i added style, but not fixed

[kylejw2]

@pthieu

My html structure is a bit more complicated than a div, should I be passing the style to the root element in the rowRenderer? Or should I be passing it deeper?

My html structure is also more complicated. Passing it to the root element worked great for me 👍

[virtuosyo]

@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:

rowRenderer={({ index, key, style }) => {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  )
}}

Source: #880 (comment)
it works!