How to prevent repaint of other elements when using CSS transition

Question

I am trying to prevent browser repainting to improve performance on a large single page app that makes use of CSS animations.

If I have an element that has a :hover { transform: scale(...) } effect on it, I can prevent repaints by using the will-change: transform and/or transform: translateZ(0) as mentioned here.

But as soon as I add a transition to that element, many elements start being repainted again.

Here is a demo codepen and a gif of it

The only thing that worked to prevent this repaint is to put the other elements before the animating element in the DOM order, or to z-index the animating element above the other elements. But with a complex single-page app, I do not want to have to micromanage the z-index of any element that just wants a hover transition.

Any other ideas or references? I haven't seen this specific problem with transitions discussed elsewhere.

Answer 1

It seemed like the position: absolute; on .other was not creating a new layer, I was able to solve the issue by adding transform: translateZ(0) to the .other class.

JSbin

Given that you're working on a SPA, i'm not sure how feasible this approach is, since there could be hundreds of elements after the circle.