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:
zoom
The 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: 1
you 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
andtransform
Under thescale
is 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
,scaleY
Specialized inx
,y
Direction 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:
- Browser compatibility. IE All-family/chrome/safari and ie9+ modern browser differences.
- The values that control scaling are not the same.
zoom
more 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:
- Zoom is scaled relative to the upper-left corner, while scale is centered by default;
- Zoom changes the amount of space the element occupies, and the scale occupies the original size and the page layout does not change;
- There may be differences in how the zoom and scale render calculations for elements (see below).
- 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 usezoom
The control of some static content can be avoided in order toscale
and possessiontranslate
,rotate
,skew
such as the commontransform
Property.
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