React App CSS Transitions Are Very Slow

Question

I have a simple blog that i'm developing using create-react-app (using react-scripts@next to get CSS Modules support).

Repo Demo

The problem i'm having is the CSS hover transitions are very laggy and slow. I previously implemented this interface using Node EJS templates and everything was snappy and fast.

I'm thinking the problem maybe has to do with the PostSummary component receiving new props and re-rendering constantly, but all the props appear to be static once they're loaded.

I checked the Chrome performance tab and it said the majority of the cycles were being used by paint time (and not load time).

Very confused, anything I can test to resolve the issue?

Answer 1

When you have animations that you know will fire, it's good practice to use the will-change rule, to help the browser be more efficient.

Adding the following rule improves performance in Chrome substantially:

will-change: transform, box-shadow, z-index;

Also, check out this article. It provides AWESOME tricks to help improve the performance and animations on your website.

https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

One thing I see is that on hover you're changing the z-index. That has a possibility of slowing things down, so just be mindful when using any of the positioning rules. The transform: translate rules are much more performant than top, left, right, bottom, z-index. Not sure if you can get around using z-index or not with your design, but it's good to keep it in mind anyways.