How to scale elements and their layout with CSS "zoom"
- Published at
- Updated at
- Reading time
- 1min
You probably know that you can use the scale function scale() or even just scale property to transform and change an element's size.
The thing with scale is that it only changes visual appearance and the layout size of the target element remains the same.
Today I learned there's also the zoom property. zoom "really" scales the element and its layout. Check this out!
zoom scales the element and its layout.transform: scale() scales visually but the layout footprint stays at 120×120.What's the browser support?
It's pretty green!
I can totally see constrained situations where this can come in handy, but you should avoid animating it because browsers probably don't appreciate the layout shift.
Someone pointed out that there are still browser inconsistencies for zoomed elements. Boooh!
Apparently, Safari doesn't return the updated element layout size if you use getBoundingClientRect(). width and height remain the initial size of 120px time 120px (tested in Safari 26.3).
Chrome and Firefox work as expected.
Join 6.4k readers and learn something new every week with Web Weekly.
Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.