Scaling elements without transform hacks
transform: scale() shrinks an element visually but keeps its original layout space, requiring negative margins to collapse the gap. zoom scales the element and its layout footprint together — no hacks needed.
2 zoom: 0.5;
3 /* layout shrinks with the element */
4}
2 transform: scale(0.5);
3 transform-origin: top left;
4 /* layout space stays full-size */
5 margin-bottom: -50%;
6 margin-right: -50%;
7}
Browser Support for Css zoom
Since 2024 this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Layout-aware scaling
zoom scales the element and the space it occupies. Surrounding elements reflow naturally, no negative margins needed.
Simpler code
One property does the job. No transform-origin, no margin overrides, no layout compensation.
Now cross-browser
zoom was Chrome-only for years. Firefox 126 added it in 2024, making it safe to use everywhere.
How it works
transform: scale() is a visual-only transform. The element renders smaller but its layout box stays the original size, leaving a gap where the element used to be. The workaround was setting transform-origin: top left and applying equal negative margins — a fragile hack that breaks with different origins or zoom levels.
zoom scales the element and its layout footprint together. Set zoom: 0.5 and the element takes up half the space in the flow. No negative margins, no transform-origin tweaking.
The key difference: transform applies after layout, zoom applies during layout. Use zoom when you want surrounding content to reflow around the scaled element. Use transform: scale() for animations or when you intentionally want to preserve the layout space.