What does will-change do, and what are the risks of overusing it?

will-change tells the browser that a property, such as transform or opacity, is about to change. The browser can then prepare early. Usually it promotes the element to its own compositor layer. A layer is like one sheet in a stack of transparent sheets, and the compositor stacks the sheets to make the final image. Because the element already has its own sheet, the animation starts without a paint hitch (a short freeze while the browser repaints).

The risks: each layer costs GPU memory and adds compositing work. Too much will-change can increase memory use and actually make the page slower, especially on mobile. This happens if you put it on many elements, or on everything with *.

It can also change how the page renders. For example, will-change: transform or will-change: opacity creates a new stacking context. It does this only for properties that would create one anyway. A stacking context is like a folder of layers: z-index only sorts elements inside the same folder. So a child's z-index may suddenly stop working against elements outside.

How to use it:

• Use it sparingly, only on elements you know will animate.
• Ideally add it just before the animation, for example when the user hovers over the parent.
• Remove it after the animation ends.

It is a fix for a problem you have measured, not a default.