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}
Css zoom Browser Support
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.
Your first month is free
Managed WordPress hosting for faster sites.
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.