minor fixes

This commit is contained in:
Ilya Kantor 2021-06-25 08:29:08 +03:00
parent e06bc63aa0
commit e79ce9d98a

View file

@ -419,14 +419,12 @@ In more technical details, when there's a style change, the browser goes through
2. **Paint**: re-compute how everything should look like at their places, including background, colors,
3. **Composite**: render the final results into pixels on screen, apply CSS transforms if they exist.
During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite.
During a CSS animation, this process repeats every frame. However, CSS properties that never affect geometry or position, such as `color`, may skip the Layout step. If a `color` changes, the browser doesn't calculate any new geometry, it goes to Paint -> Composite. And there are few properties that directly go to Composite. You can find a longer list of CSS properties and which stages they trigger at https://csstriggers.com.
The calculations may take time, especially on pages with many elements and a complex layout. And the delays are actually visible on most devices, leading to "jittery", less fluid animations.
The animations of properties that skip the Layout step are faster. It's even better if Paint is skipped too.
For most CSS properties, the rule is simple: if its change may affect geometry, move elements (even in theory), then it triggers Layout. Otherwise (e.g. a `color` change may not shift elements around), the browser doesn't need to calculate geometry and directly goes to Paint, or even Composite step. You can find a longer list of CSS properties and which stages they trigger at <https://csstriggers.com>.
The `transform` property is a notable exception:
- CSS transforms affect the target element box as a whole (rotate, flip, stretch, shift it).
- CSS transforms never affect neighbour elements.