Zoom Vs. Scale in CSS3

Question

I was looking for some css properties that I never used and came to know about zoom property of css3

• What is the similarities and difference between them?

• When to use Zoom and when scale? Both do pretty much the same job.

• Which is more efficient to use and why?

What have I noticed?

• both scales the object but default transform-origin for scale its center and for zoom its top-left I think;

• when we use them for scaling on hover, zoom will scale and again shrinks to the original dimension, while scale will only shrink on hover-out. -->> jsfiddle showing hover effectst**

*  {      -webkit-transition-duration: 0.3s;  	-moz-transition-duration: 0.3s;  	-ms-transition-duration: 0.3s;  	-o-transition-duration: 0.3s;  	transition-duration: 0.3s;  }    box, box2  {      display: inline-block;      width: 100px;      height: 100px;            margin: 20px;  }    box  {      background: #b00;  }    box:hover  {      zoom: 1.1;  }    box2  {      background: #00b;  }    box2:hover  {      -webkit-transform: scale(1.1);  	-moz-transform: scale(1.1);  	-ms-transform: scale(1.1);  	-o-transform: scale(1.1);  	transform: scale(1.1);  }

<box></box>  <box2></box2>

---

Some Stackoverflow QA

• What Does 'zoom' do in CSS?

• Zoom versus -transform scale

div {    display: inline-block;    height: 50px;    width: 50px;  }  .one {    background: #07a;    -webkit-transform: scale(2);    -moz-transform: scale(2);    -ms-transform: scale(2);    -o-transform: scale(2);    transform: scale(2);    transform-origin: top top;  }  .two {    background: #eee;    zoom: 200%;    margin-left:100px;  }    .three {    background: #07a;    transform-origin: top left;    transition:all 0.6s ease;  }    .three:hover{    -webkit-transform: scale(2);    -moz-transform: scale(2);    -ms-transform: scale(2);    -o-transform: scale(2);    transform: scale(2);  }    .four {    background: #eee;    transition:all 0.6s ease;  }    .four:hover{    zoom: 200%;  }

<h4>Already zoomed and scalled</h4>  <div class="one"></div>  <div class="two"></div>  <hr>  <h4>Zoomed and Scalled on hover</h4>  <div class="three"></div>  <div class="four"></div>

Answer 1

Transform is more predictable than zoom across browsers.

Zoom affects positioning differently in different browsers.

example: position:absolute; left:50px; zoom: 50%;

• IE will not change the left value at all.
• Chrome will change the left value to 25px. Effectively it does do left = left * zoom. But DevTools Computed Values in DevTools will still display left: 50px, even though that is effectively not true due to the zoom.

Transform is handled the same way in all browsers (as far as I can tell).

example: position:absolute; left:50px; transform: scale(0.5)

• left would effectively be set to 25px in both Chrome and IE. (again, computed values will still not reflect this, it will display left:50px)
• To avoid changing the left value, simply use transform-origin: 0 0. That will ensure left is still 50px.

Demo: http://jsfiddle.net/4z728fmk/ shows 2 boxes where the small one is zoomed or scaled to 50%. Looks like this:

edit: img updated 2016-06-16 with Firefox (nothing had change in Chrome or IE since last time)

Answer 2

Complementary to Drkawashima's answer:

• zoom doesn't work in Firefox at all. See caniuse
• Once upon a time (fairy tale ends here sorry), zoom: 1; was the mighty declaration that helped to debug IE6. It conferred the element it was applied an internal "switch" to this browser named hasLayout (not a CSS property, just a concept like "clearfix" is). You'll find position: relative; zoom: 1; quite a lot in old projects