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 · 2022-12-01T20:23:37.183

Transform is more predictable than zoom across browsers.

Zoom affects positioning differently in different browsers.

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

Chrome will effectively compute the left value to 50px * 50%, that is 25px...but this is not reflected in DevTools Computed Values.
IE will not change the left value at all.

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. (DevTools Computed Values will not reflect this - it will display the source code only)
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: Added Firefox in 2016. At the time it was the most problematic browser out of the three, as zoom:50% had no effect at all. And with transform: scale(0.5) the borders around the inner box have different thickness... but that could be a subpixel issue

@Drkawashima do you know which method is better for performance? — Sofía, Apr 27 '20 at 06:26

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

16

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

21,711
8
54
74

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 3 · Answer 3 · answered Oct 23 '16 at 02:17

3

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

366
4
8

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

3

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.

answered Jul 22 '20 at 07:41

Nitin Jadhav

6,495
1
46
48

2

You may want to use it in conjunction with `transform-origin: 0 0`. – mwfearnley Jul 24 '21 at 13:06

score 1 · Answer 5 · answered Jan 16 '22 at 12:07

1

zoom and scale work quite differently when it comes to layout. Why scale scales the element as is zoom works like a global browser zoom applied to a specific element.

answered Jan 16 '22 at 12:07

ya.teck

2,060
28
34

score 1 · Answer 6 · answered Jan 11 '23 at 10:42

TLDR; Use transform: scale instead of zoom

I'm compiling all the answers after reading and researching.

╔═════════════════════════════╦════════════╦════════════════════════╗
║                             ║ Zoom       ║ Transform Scale        ║
╠═════════════════════════════╬════════════╬════════════════════════╣
║ CSS Animations              ║ No         ║ Yes                    ║
╠═════════════════════════════╬════════════╬════════════════════════╣
║ Cross Browser Compatibility ║ No         ║ Yes                    ║
╠═════════════════════════════╬════════════╬════════════════════════╣
║ Consistent Layout           ║ No         ║ Yes                    ║
╠═════════════════════════════╬════════════╬════════════════════════╣
║ Usage                       ║ zoom: 50%; ║ transform: scale(0.8); ║
║                             ║            ║ transform-origin: 0 0; ║
╚═════════════════════════════╩════════════╩════════════════════════╝

References:

Zoom Vs. Scale in CSS3

What have I noticed?

Some Stackoverflow QA

6 Answers6

Linked