minor fixes
This commit is contained in:
parent
e06bc63aa0
commit
e79ce9d98a
1 changed files with 1 additions and 3 deletions
|
@ -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.
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue