Masonry component re-renders items that are visible in the viewport while scrolling

I’m having some performance issues using the Masonry component. Sometimes, when scrolling a page with masonry cells, while they are still visible in the viewport, a re-render is triggered, causing the browser to do a new layout and painting operation for the “new” items, but nothing on them has changed to make them trigger a re-render. This can be seen by using a CSS keyframe animation that’s triggered when an element is added to the DOM. I can also reproduce the issue on the demo page. To reproduce it I do the following steps:

1. Go here: https://bvaughn.github.io/react-virtualized/#/components/Masonry
2. Select checkbox “Use WindowScroller?”
3. Open Developer Tools
4. Select a masonry brick and change it’s corresponding <style> tag by adding the following code

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

1. Set the following CSS properties for the current masonry brick class: animation-name: fadeIn; animation-duration: 1s;
2. Then scroll on the page and watch the cells animating while they are still in the viewport, you can also see in the elements panel the corresponding elements flashing, meaning they were re-rendered. I would expect them to be only rendered when being added to the DOM on scroll at the bottom or top of the page, depending on the direction of the scroll.

[bvaughn]

Fix will be released with 9.13.0 shortly.

[lrholmes]

Hi, I’m also having this issue. It’s occurring under the same circumstances described in the OP - an opacity/transform animation on a cell item is being re-rendered while scrolling, making the animation unusable.

I wonder if there is a better or recommended way of handling animation on cell enter?