CSS zoom vs scale Comparison
zoom and transform: scale() both make an element look bigger or smaller, but they work at different stages. zoom changes the element's size in layout, so everything around it adjusts. scale() only changes how it is drawn, so the layout stays put.
Scale factor
zoom
A
Target
C
Layout width:
Neighbor C moved:
transform: scale()
A
Target
C
Layout width:
Neighbor C moved:
How they differ
| zoom | transform: scale() | |
|---|---|---|
| Layout | Changes. Neighbors move to make room. | Doesn't change. The box keeps its original space and can overlap neighbors. |
| Text and borders | Re-laid out at the new size, so text can rewrap. | Drawn larger or smaller after layout, so text keeps its original wrapping. |
| Animation cost | Triggers layout. | Handled by the compositor, cheap to animate. |
| Standard | Part of the CSS spec; Firefox added it in version 126. | Supported everywhere for years. |
Generated CSS
zoom Browser Support
Newly availableSince 202495% global usage
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Works in all modern browsers. May need a fallback for older browsers.
1+
126+
3.1+
12+