The difference between zoom and Transform:scale

The difference between small tips:zoom and Transform:scale This post was posted on November 3, 2015, Tuesday, 00:52, classified as CSS related. Read 7,876 times, 8 times today

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=5019

One, IE and chrome and other browsers and zoom

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

zoomThe literal meaning is "zoom", a concept commonly used in photography. You can also follow this concept for the zoom effect on the web. You can change the dimensions of the elements on the page, which are true dimensions.

In the old web era. *zoom: 1you can add haslayout to the Ie6/ie7 browser to clear the floating, fix some of the problems on the layout of the incurable diseases and so on.

The supported value types are:

• percent value: zoom:50% , which means shrinking to half the original.
• Value: zoom:0.5 , which means shrinking to half the original.
• normal keyword: zoom:normal equivalent to zoom:1 .

Note that although the Chrome/safari browser supports zoom properties, it zoom is not a standard property.

Second, the scale under the CSS3 transform

andtransformUnder thescaleis not the same, it is clear that the specification is explicitly written. Supported from ie9+ to other modern browsers. The syntax is:transform: scale(<x> [<y>]). also hasscaleX,scaleYSpecialized inx,yDirection of control.

and zoom different, the scale percent value and the normal keyword are not supported and can only be numeric. Plus, it can be negative, yes, negative. and zoom not negative!

Iii. deeper differences in zoom and scale

First summarize the differences seen on the above surface:

1. Browser compatibility. IE All-family/chrome/safari and ie9+ modern browser differences.
2. The values that control scaling are not the same. zoommore comprehensive, but not negative, can only be proportional control, and scale although it can only be numeric, but negative, you can only control 1 of the dimensions.

However, a deeper difference is more important.

You can really click here: Zoom vs. scale Demo

From the demo we see the following differences:

1. Zoom is scaled relative to the upper-left corner, while scale is centered by default;
2. Zoom changes the amount of space the element occupies, and the scale occupies the original size and the page layout does not change;
3. There may be differences in how the zoom and scale render calculations for elements (see below).

4. The scaling rules for text are inconsistent. Zoom zoom is still limited to a minimum of 12 pixels in Chinese, while scale is purely proportional to the graph and the text 50% is the original size.

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

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

According to some of my colleagues ' tests, adding to any element in the flow of a document zoom causes a whole page to be re-rendered, but scale only to be redrawn on the current element. That's a good understanding, right. When scale changes, its original size is constant, therefore, there is no recalculation of layout; but zoom it's a lot of trouble to get a whole body.

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

animation , but there is the case that the element originally used some transform property, at this time, then use scale for animation Scaling will overwrite the original value, and things will become cumbersome.

The 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, found that some of the animation under the Android machine like constipation, the poop is half hanging is not falling down, you have engaged.

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

Iv. concluding remarks

zoom/scale , to achieve the image hover magnification effect. IE7/IE8 use zoom, other browsers use Css3 transform scale value is implemented. As for zoom zoom is not this compatibility difference by the center point scaling, by using the "Ocean layout" implementation, the specific reference to "IE Zoom or matrix Matrix Filter Center Point Transform Implementation" article, which is compatible with the use of zoom/scale .

On the mobile side, you can also usezoomThe control of some static content can be avoided in order toscaleand possessiontranslate,rotate,skewsuch as the commontransformProperty.

It is important to note that Chrome and other browsers zoom/scale do not use it at the same time, because the scaling effect is cumulative. As shown in 4 times times smaller:

The above is the whole content of this article, the behavior is hurried, the mistake inevitably, welcome correction. Reproduced please keep the original source, convenient traceability, because there are more updates.
This address: http://www.zhangxinxu.com/wordpress/?p=5019

The difference between zoom and Transform:scale