The difference between zoom and Transform:scale

browser and zoom, IE and chrome

Still a few years ago, zoom it was only IE's own private toy, but now, in addition to the Firefox browser, other, especially the chrome and mobile browsers have been well supported zoom properties:

zoomThe literal meaning is "zoom", a concept commonly used in photography. For zoom effects on the Web, you can also follow this concept. You can change the dimensions of the elements on the page, which are real dimensions.

In the old web age. *zoom: 1can give Ie6/ie7 browser to add haslayout, used to clear the floating, repair some of the layout of the incurable diseases and so on.

The value types that it supports are:

• Percent value: zoom:50% , which means narrowing to the original half.
• Value: zoom:0.5 to reduce to half the original.
• Normal keyword: zoom:normal equivalent to zoom:1 .

Note that although the Chrome/safari browser supports zoom attributes, it zoom is not actually a standard attribute.

Second, the scale under the CSS3 transform

And transform the next is scale not the same, is clearly written in the specification. It is supported from ie9+ to other modern browsers. The syntax is: transform: scale( []) . At the same time scaleX , scaleY special x , y directional control.

And zoom Unlike, scale percent values and keywords are not supported normal , only numeric values. Also, it can be negative, yes, negative. zoomit can't be negative!

Iii. deeper differences between zoom and scale

Let's summarize the differences that are seen on the above surface:

1. Browser compatibility. The difference between IE whole family/chrome/safari and ie9+ modern browsers.
2. Controls the value of scaling differently. zoommore comprehensive, but can not be negative, can only be proportional control, but scale although only numeric, but negative, you can control only 1 dimensions.

However, the deeper differences are more important.

You can ruthlessly click here: Zoom and Scale contrast demo

From the demo we see the following differences:

1. The zoom is scaled relative to the upper-left corner, while the scale is centered scaling by default;
2. The scaling of the zoom changes the amount of space the element occupies, while the original dimensions of the scale scale are unchanged and the page layout does not change;
3. Zoom and scale may have different rendering methods for elements (screenshot below).

4. The scaling rules for text are inconsistent. Zoom scaling is still limited by the minimum 12 pixel Chinese size limit, and scale is purely proportional to the graphics, text 50% original size.

Then there is an invisible but more important difference, and the performance of the rendering is significantly different .

Because the scaling of the zoom changes the real space size of the element, in other words, it affects other small partners in real time.

According to some of my colleagues ' tests, zoom adding any element to a document flow causes a whole page to be redrawn, but scale only to redraw the current element. That's a good idea, right. Scale when the change, the original size is unchanged, so there is no layout of the weight of the calculation; but to zoom lead the whole body, there is more trouble!

This allows us to consider the implementation of some features of the mobile end.

We want to achieve the scaling effect of the elements, you can use CSS3 animation , but there is a situation where the element was originally used some transform properties, at this point, and then use scale to animation Zoom, will overwrite the original value, things will become troublesome.

Smart little Buddy thought of a way to use zoom animation. From the effect, zoom is possible, but, from the performance, we have to weigh, do not fix, and found that some Android animation under the same as constipation, poop half suspended is not falling down, you have to engage.

That's all I can say, the rest is on your own!

Iv. concluding remarks

This year's QQ public number project has the use zoom/scale , realizes the picture hover enlarges the effect. IE7/IE8 use zoom, other browsers use CSS3 transform scale value implementations. As for zoom scaling is not in accordance with the center point scaling this compatibility difference, by using the "Ocean layout" implementation, specific reference "IE under the zoom or Matrix Filter Center point Transformation Implementation", which has a compatible use zoom/scale of examples.

On the mobile side, you can also use zoom some static content control, can avoid in order to scale occupy translate , rotate , skew such as common transform properties.

It should be noted that Chrome and other browsers, zoom/scale do not use at the same time, because the scaling effect is cumulative. 4 times times smaller as shown in the following figure: