The difference between zoom and scale

【principle】

Both zoom and scale are used to zoom elements, but there are many differences between the two

①Compatibility problem;

②Rendering order and its impact on layout (box);

Let's talk about compatibility issues first:

The zoom attribute is a proprietary attribute of IE browser (this sentence is not correct, because the new version of the mainstream browsers are also compatible with the zoom attribute), but remember that Firefox and old versions of webkit core browsers do not support this attribute.

The scale attribute is a new standardization of zoom in the CSS 3.0 specification draft, which is scaled through the animation attribute scale in css3

Let's talk about the rendering order and its impact on the layout (box):

[Popular understanding] is that zoom is first rendering (zooming) and then layout, which may affect the box calculation; while scale is first layout and then rendering (zooming), so it will not affect the layout (box calculation)

Specifically:

The zoom will keep the element in the upper left corner, and the scale defaults to the middle position, which can be set by transform-origin

In addition, the rendering order they perform is different. Zoom may affect the calculation of the box.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>The difference between zoom and scale</title>
    <style>
        *{
            margin:0;
            padding:0;
            font-size:12px;
        }
        div {
            width:300px;height:100px;
            border:1px solid red;
            font-size:0px;
            line-height:100px;
            margin:10px;
        }
        span {
            display:inline-block;
            height:80px;width:200px;background:blue;
            vertical-align:middle;
            overflow:hidden;
        }
    </style>
</head>

<body>
<div>
    1.<span style="-webkit-transform:scale(0.5);"></span>
</div>
<div>
  2.<span style="-webkit-transform-origin:top left;-webkit-transform:scale(0.5);"></span>
</div>
<div>
  3.<span style="zoom:0.5;">
  </span>
</div>
</body>
</html>

Let's see the effect below:

write picture description here

【Explain a little more】

In the first test, only scale is set, so the element is scaled based on its own center;

In the second test, not only the scale is set, but also the origin is set to set the base point of the scaling to the upper left corner, so the element stays in the upper left corner after the change. Although the container is set to the same line height as the height, when it is not centered in the container, because the scale is first laid out and then transformed, the transformation will not affect the layout;

The last test was to use zoom, which is an old feature although not supported on Firefox. The difference between it and the second test is that it scales first and then calculates the layout. So in the example it got the vertical centering effect

The difference between zoom and scale

Guess you like