1.8 KiB
| title |
|---|
| Will Change |
Will Change
The will-change property allows you to tell the browser what manipulations will occur with the element in order to optimize it.
.container {
will-change: transform;
}
The above property will-change is used for the class .container, in this case, the transformation on the element may or may not occur.
However, using this property there is an interesting side effect.
If we apply to the transform: translateZ (0) element, the element will create a new overlay context, and in some browsers it will also add a layer to its own rendering stream, which will give us a performance boost, which we are achieving.
Consequently, using will-change: transform, the browser will create a new overlay context, regardless of whether we applied the transform to the element or not.
The key thing to note is that will-change will create a new overlay context only if the property also creates a new overlay context. Because the transform property creates a new overlay context, will-change: transform will also create a new overlay context.
If you used will-change: display, then a new overlay context will not be created, since no value of the display property creates a new overlay context.
Let's look at another example: opacity. Opacity with a value of 1 does not create a new overlay context, but with a lower value (for example, 0.9) will create. While will-change: opacity will in any case create a new overlay context.