Zoom versus -transform scale

Question

I ran into this while developing a scaling effect onHover for one of my sites.

When you have transition durations set for CSS pseudo states, setting the zoom property will scale the element onHover, but as soon as it reaches it's max size, it shrinks back down to a smaller size (but this size is still bigger than the original).

However, when using the x-transform: scale() property with the same transitions, the item scales smoothly (and maintains its center coordinate, I might add).

You can see this in this fiddle. The red box grows to the right and down but then jumps back to a smaller size while the blue one smoothly grows and stays the full size.

Why is this?

*
{
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

box:hover
{
    zoom: 1.1;
}

box2:hover
{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

**zoom: XXX;** lets zoom the (complete) browser viewport. CSS-Transforms and Transitions will be handled specially from the browser. — Adrian Preuss, Mar 09 '14 at 07:58
`zoom` and `transform:scale` works differently. `zoom` actually zooms the _size_ of the node, while `transform:scale` scales the _view size_ of the node. Also, if I remember correctly, `zoom` only guaranteed to work in IE; Chrome supports it for some reason, but not other browsers. — Passerby, Mar 09 '14 at 08:24
@Passerby Interesting. Can you explain the strange behavior I described where the node will grow to about twice the size of the zoom that I input (1.2 instead of 1.1) and then shrink back down to the size I specified? — Liftoff, Mar 09 '14 at 09:27

score 2 · Answer 1 · answered Jan 03 '15 at 16:42

zoom is not one of the supported animated properties.

What appears to be happening is this: The cursor enters the red box it instantly assumes the size of the zoom value. Then the transition kicks in and the zoom is applied for a 2nd time on the already-zoomed element. When the transition completes the box reverts to the original zoomvalue.

By stopping the animation after the transition (using an alert on transitionend I can measure the box and see it has a width of 121px (100px * 1.1 * 1.1). So the zoom does appear to be getting applied twice.

No idea why it behaves like this but since it's not a supported animated effect there's not a really an expected behavior.

Zoom versus -transform scale

1 Answers1

Linked