JS animation performance with 'will-change' vs 'transformZ(0)'

Question

I've been trying out javascript animations and noticed performance differences when I was using will-change property and transform3D() to separate animated element to a new layer for gpu rendering. It happens when I'm trying to animate scaling of the element, which also has a border-radius css property. Codepen here

Without will-change property browser will perform additional Rasterize Paint (in rasterizer thread1 on a screenshot)

With will-change there is no Rasterize Paint action (screenshot).

And it gets much worse when I'm trying to animate multiple elements at once in real-life project (especially it hurts on mobile). (with will-change, without will-change)

So the question is: how will-change manages to provide that kind of optimization even though it's supposed to do basically the same thing as transformZ(0) (creating new layer for gpu-rendering). And is there any way to optimize this animation without using will-change?

Answer 1

will-change basically does the same thing (as of today) as the translateZ(0) hack: it pulls the element out onto a new rendering layer. The difference is that will-change is telling the browser your intent, namely, that you will be changing this property; whereas with translateZ(0) that is merely a coincidental side effect.

So will-change is just a more modern way of accomplishing the same thing, and as such, it's also less widely supported than 3D transforms.

It's conceivable that will-change will get more powerful over time. I can imagine it being used for colour changes (using a GPU shader), particular positioning changes (e.g. position of an absolutely positioned element), and so on.