Non-GPU Properties¶
Properties that are not GPU-accelerated trigger rendering work on the main thread:
- Repaints: are relatively cheap
- Reflows: are expensive because the browser must recalculate the position and size of elements in the document flow
Prefer Scale over Size when possible
If you only need a visual resize effect and don't need the layout to actually change, use Scale instead of Size.
Which Properties Are Not GPU Accelerated?¶
| Property | CSS Property | Impact |
|---|---|---|
| Size | width / height |
Repaint + Reflow |
| Custom Property | Any numeric CSS property | Repaint or Repaint + Reflow |
| Custom Color Property | Any color CSS property | Repaint |
Further Reading¶
- Animations and Performance (MDN) — animation performance and frame rate
- Stick to Compositor-Only Properties (web.dev) — why compositor-only properties are fast
Next Steps¶
Check out the Non-GPU Accelerated properties.