小tips: zoom和transform:scale的區別
一、IE和Chrome等瀏覽器與zoom
還在幾年前，zoom還只是IE瀏覽器自己私有的玩具，但是，現在，除了FireFox瀏覽器，其他，尤其Chrome和移動端瀏覽器已經很好支持zoom屬性了：
zoom的字面意思是「變焦」，攝影的時候常用到的一個概念。對於web上的zoom效果，你也可以按照此概念理解。可以改變頁面上元素的尺寸，屬於真實尺寸。
在舊的web時代。*zoom: 1可以給IE6/IE7瀏覽器增加haslayout, 用來清除浮動，修復一些布局上的疑難雜症等。
其支持的值類型有：
百分比值：zoom:50%，表示縮小到原來的一半。
數值：zoom:0.5，表示縮小到原來的一半。
normal關鍵字：zoom:normal等同於zoom:1.
Advertisements
注意，雖然Chrome/Safari瀏覽器支持了zoom屬性，但是，其實zoom並不是標準屬性。
二、CSS3 transform下的scale
而transform下的scale就不一樣了，是明明確確寫入規範的。從IE9+到其他現代瀏覽器都支持。語法為：transform: scale(<x> [<y>]). 同時有scaleX, scaleY專門的x, y方向的控制。
和zoom不同，scale並不支持百分比值和normal關鍵字，只能是數值。而且，還能是負數，沒錯，負數。而zoom不能是負值！
三、zoom和scale更深層次的差異先總結下上面表面所見的差異：
瀏覽器兼容性。IE全族/Chrome/Safari和IE9+現代瀏覽器的差別。
Advertisements
控制縮放的值不一樣。zoom更全面，但是不能是負數，只能等比例控制；而scale雖然只能是數值，但是能負數，可以只控制1個維度。
然而，更深層次的差異才是更重要的。
從demo我們看出如下幾點差異：
zoom的縮放是相對於左上角的；而scale默認是居中縮放；
zoom的縮放改變了元素佔據的空間大小；而scale的縮放佔據的原始尺寸不變，頁面布局不會發生變化；
zoom和scale對元素的渲染計算方法可能有差異。
對文字的縮放規則不一致。zoom縮放依然受限於最小12像素中文大小限制；而scale就是純粹的對圖形進行比例控制，文字50%原來尺寸。
然後，還有一個肉眼看不見卻更重要的差異
渲染的性能差異明顯。
由於zoom的縮放會改變元素的真實空間大小，換句話說，實時影響了其他小夥伴。
根據我的一些測試，在文檔流中zoom加在任意一個元素上都會引起一整個頁面的重新渲染，而scale只是在當前的元素上重繪。這其實很好理解，對吧。scale呢變化時候，其原本的尺寸是不變的，因此，就沒有layout的重計算；但是zoom牽一髮動全身，就麻煩地多！
這就讓我們要斟酌下移動端一些功能的實現了。
我們要實現元素的縮放效果，可以使用CSS3 animation, 但是存在這樣一種情況，就是元素原本就使用了一些transform屬性進行，此時，再使用scale進行animation縮放，就會覆蓋原來的值，事情就會變得麻煩。
聰明的小夥伴想到了一個方法，就是使用zoom做動畫。從效果上講，zoom是可以的；但是，從性能上講，大家就要掂量掂量了，不要弄好后，發現某些Android機子下面動畫就像便秘一樣，屎拉了一半懸著就是掉不下來，你就有的搞了。
我能說的就這麼多，其他靠你自己了！
文/丁向明
做一個有博客的web前端自媒體人，專註web前端開發，關注用戶體驗，加我qq/微信交流：6135833
http://dingxiangming.com