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!
Scale factor:1
zoom: 1
zoom scales the element and its layout.
transform: scale(1)
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.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。