73

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>

6 Answers 6

106

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

3
  • Thank you somewhat helpful! Nov 17, 2014 at 7:57
  • 1
    Well Explained about it. Nov 25, 2018 at 18:56
  • @Drkawashima do you know which method is better for performance?
    – Sofía
    Apr 27, 2020 at 6:26
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
1
  • Nice addition. I've now updated my answer to include an image showing how FF fails when it comes to zoom Jun 22, 2016 at 10:04
3

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

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.

1
  • 2
    You may want to use it in conjunction with transform-origin: 0 0.
    – mwfearnley
    Jul 24, 2021 at 13:06
2

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:

  1. https://stackoverflow.com/a/63029189/9275249
  2. https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
  3. https://caniuse.com/?search=zoom
  4. https://stackoverflow.com/a/26712500/9275249
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.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.