Zoom Vs. Scale in CSS3
CssDomZoomingScaleCss Problem Overview
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>
Css Solutions
Solution 1 - Css
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 doleft = left * zoom
. But DevTools Computed Values in DevTools will still displayleft: 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 to25px
in both Chrome and IE. (again, computed values will still not reflect this, it will displayleft:50px
)- To avoid changing the
left
value, simply usetransform-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)
Solution 2 - Css
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 findposition: relative; zoom: 1;
quite a lot in old projects
Solution 3 - Css
zoom
does not work with css animations or transition
propriety:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Solution 4 - Css
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.