How to scale elements and their layout with CSS "zoom"

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!

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.