React-virtualized: v9.12 List not working in Chrome v62: scroll bar sticks, rows flicker, fail to render

[christophercliff]

Example: https://plnkr.co/edit/pXffbuQpJ8ZPumRCVg2G?p=preview

Usage like:

const htmlEl = document.body.appendChild(document.createElement('div'))
ReactDOM.render(React.createElement('div', {
    style: {
        background: 'pink',
        height: 600,
        width: 600,
    },
}, React.createElement(ReactVirtualized.List, {
    height: 600,
    width: 600,
    rowCount: 1000,
    rowHeight: 20,
    rowRenderer: function (options) {
        return React.createElement('div', {
            key: options.index,
            style: { height: 20 },
        }, 'asdf')
    }
})), htmlEl)

[christophercliff]

I had missed the style prop on the row renderer.

[farfromrefug]

@christophercliff Can you explain how you fixed it? I have the same issue and can't get it to work, even with your example
EDIT: actually finally understood what it means

[christophercliff]

Explained here: https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#rowrenderer

rowRenderer = ({ style }) => (<div style={style} />)

[marsonmao]

I've stuck in this for a few hours too, so you just have to wrap an additional <div style={style}> outside your true element then it's all fine. The style passed into rowRenderer() is like this:

height: 63px
left: 0px
position: absolute
top: 0px => varying for all list elements, like 63px, 126px...etc.
width: 100%

so wrap the element with this style then react-virtualized's List could correctly control the positions.