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

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>

Drkawashima · Accepted Answer · 2018-05-01T11:06:35.437

92

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:

comparison of zoom and transform in different browsers

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

edited May 01 '18 at 11:06

answered Nov 03 '14 at 10:43

Drkawashima

5,996
2
32
44

Thank you somewhat helpful! – Suresh Karia Nov 17 '14 at 07:57
2

@vsync: Ask and you shall recieve! Image updated. (Turns out FF is the most problematic of the bunch, the 50% zoom has no effect and it somehow can't even render borders properly on the second box) – Drkawashima Jun 16 '16 at 18:50
1

Well Explained about it. – Rakshit Shah Nov 25 '18 at 18:56
@Drkawashima do you know which method is better for performance? – Sofia Apr 27 '20 at 06:26

score 11 · Answer 2 · answered Oct 14 '15 at 07:58

11

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

answered Oct 14 '15 at 07:58

FelipeAls

20,411
7
49
71

Nice addition. I've now updated my answer to include an image showing how FF fails when it comes to zoom – Drkawashima Jun 22 '16 at 10:04

score 2 · Answer 3 · answered Oct 23 '16 at 02:17

2

zoom does not work with css animations or transition propriety: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

answered Oct 23 '16 at 02:17

Ustym Ukhman

306
4
8

score 1 · Answer 4 · answered Jul 22 '20 at 07:41

zoom is not standard css feature.

from MDN:

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Use transform: scale(0.8) instead.

Zoom Vs. Scale in CSS3

What have I noticed?

Some Stackoverflow QA

4 Answers4

Linked