About the difference between scale and zoom

In fact, about scale, I used to use him to make some CSS3 special effects of the Zoom out Ah, play is also quite 6666, and *zoom:1 before is used to do CSS hack, that is, trigger IE6/7 haslayout clear floating. Finally, one day, the good UE said the 1px line in the Retina screen appears stature want us to fix this bug. Then refer to Http://www.tuicool.com/articles/ZRv6bun, do a series of experiments and finally took a plan to use scale, by the way to verify that Android really does not support the theory of 0.5px.

Originally with the scale of this solution is fine, but later in order to solve some wonderful layout problems found this zoom,scale actually a bit of material can be dug.

First, the scale and zoom are respectively said

Let's take a look first. Scale,scale is the Ace of the 2d conversion of transform, ie9+, Firefox, Opera, Safari, and Chrome are all supported by basic modern browsers. Scale supports both Scalex,scaley and scales, which are scaled by default from the upper-left corner and the value of the scale can be negative, while the value of the scales is negative and scaled relative to the lower-right corner. However, scale supports only numeric values, and normal and percent are invalid values. The most important thing is that scale does not cause the entire page to redraw, because the size of the element itself does not change when it is in effect, but is redrawn on the current element.

Let's look at a test code:

<! DOCTYPE html>font-size:12px;            border:1px solid #000;        }        . S1. S3 {            transform-origin:0 0;            Transform:scale (. 5);            Background-color:yellow;        }       . S2. s3 {           background-color:pink;       }    </style>
<div class= "S1" >
    <div class= "S3" > I'm a little bird </div>
    <div class= "S3" >rtrtrt</div>
</div>
<div class= "S2" >
    <div class= "S3" > I'm a little bird </div>
    <div class= "S3" >rtrtrt</div>
</div>
</body> 
　　
By code and known, scale can be redrawn at the current element, but in fact the space occupied by that element has not changed. But all the attributes, including border, are actually scaled, so let's look at zoom.
Change the above code. S1. S3 to the following:
. S1. S3 {            zoom:. 5;            Background-color:yellow;        }
　　
We can see the change to zoom, not only by the zoom element has been redrawn, the other elements of the page has also been redrawn, resulting in the entire layout of the page changes and zoom zoom is relative to the upper left corner and scale by default is centered scaling. Another point is that the border-width and font-size of the zoom element do not look as effective.
The value types that zoom can support have percent values, numeric values, and the normal keyword, but it's important to note that although Chrome/sarari supports the Zoom property, zoom is not a standard property
Two, the difference between zoom and scale summary
1, Compatibility differences: Zoom for non-standard properties, in addition to the Firefox browser has been in other browsers have been well supported, scale has been standard properties in addition to ie8-modern browser can be better support;
2, the value difference: the legal value of zoom can be numeric, percent and normal and scale can only be numeric;
3, Zoom center point difference: Zoom Zoom Center point is the upper left corner, and scale default is the center point, but can be changed by Transform-origin;
4. Redraw the difference: Zoom changes the size of the element occupy space will cause the whole page to redraw and scale to occupy the original size is not changed, only the current element to redraw;
5, rendering calculation method may be different: zoom for sharpening, and scale for fuzzy;
6, the text of the scaling rules are inconsistent: zoom is still limited to the minimum 12px of the Chinese size limit, and scale is purely proportional control of the graph, text 50% original size;
7, this should be similar to the previous one, border 1px when Zoom is limited to the minimum browser display 1px, and scale is purely proportional control, unrestricted.
Iii. Summary & Acknowledgement
In summary, to change the mobile 1px in the retina screen appears thicker problem also need to use Scale,scale to break the browser's minimum display limit, let you fly freely.
Thanks Zhang Xin Xu Big blog, the address is as follows http://www.zhangxinxu.com/wordpress/2015/11/zoom-transform-scale-diff/is my reference important source, The difference between the calculation methods of the element rendering if it's not Zhang Xin Xu's big blog, I'm not paying attention.
Above, if the wrong welcome indicates ~
About the difference between scale and zoom