Is It Okay to Use Zoom:1 in My CSS Classes

Is it okay to use zoom:1 in my css classes?

The problem you are fighting with this is the IE hasLayout issue. Here is a good article and overview on which properties also trigger "having Layout" in IE.

I know of no side-effects to zoom: 1 except that it's not W3C valid. I'm pretty sure I'm using it myself in some projects.

However, there is of course the remote chance that zoom becomes a real CSS property one day - or gets used in another proprietary context like on the iPad or whatever - which could lead to things breaking.

A really clean solution, zoom is not. If at all possible, it's a good idea to give the element "Layout" in some other way as outlined in the article.

What is the use of zoom:1 in stylesheets?

Using this rule is the fastest (and - usually - the cleanest) way to activate hasLayout property for an HTML element. This, in turn, affects (usually in positive way) its rendering in older versions of Internet Explorer:

In Internet Explorer, an element is either responsible for sizing and
arranging its own contents, or relies on a parent element to size and
arrange its contents.

In order to accommodate these two different concepts, the rendering
engine makes use of a property called hasLayout that can have the
values true or false for the element concerned. We say an element
gains a layout or has a layout when the hasLayout property has the
value true.1

When an element has a layout, it is responsible for sizing and
positioning itself and possibly any descendant elements. In simple
terms, this means that the element takes more care of itself and its
contents, instead of relying on an ancestor element to do all the
work. Therefore, some elements will have a layout by default, though
the majority do not.

I'd recommend reading this article as well (the quote is from there actually).

What does *zoom:1 do in bootstrap?

It's like an inline conditional statement for IE5.5 - IE7. Only IE 5.5, IE6, and IE7 will display zoom: 1 because of the inline * (known as the "star property hack"). Similar to the IE6 hack with the underscore _.

See: http://snook.ca/archives/html_and_css/targetting_ie7

What bug does zoom:1; fix in CSS?

This provides an internal property known as hasLayout in Internet Explorer versions 7 and lower.

The definitive article on the subject is here: http://www.satzansatz.de/cssd/onhavinglayout.html

A lot of Internet Explorer's rendering
inconsistencies can be fixed by giving
an element “layout.” In this article,
the authors focus on some aspects of
this complicated matter.

“Layout” is an IE/Win proprietary
concept that determines how elements
draw and bound their content, interact
with and relate to other elements, and
react on and transmit application/user
events.

---

For an example of a specific bug that zoom: 1 (and so hasLayout) helps to fix:

Inline block doesn't work in internet explorer 7, 6

What bug does zoom:1; fix in CSS?

This provides an internal property known as hasLayout in Internet Explorer versions 7 and lower.

The definitive article on the subject is here: http://www.satzansatz.de/cssd/onhavinglayout.html

A lot of Internet Explorer's rendering
inconsistencies can be fixed by giving
an element “layout.” In this article,
the authors focus on some aspects of
this complicated matter.

“Layout” is an IE/Win proprietary
concept that determines how elements
draw and bound their content, interact
with and relate to other elements, and
react on and transmit application/user
events.

---

For an example of a specific bug that zoom: 1 (and so hasLayout) helps to fix:

Inline block doesn't work in internet explorer 7, 6

Zoom Vs. Scale in CSS3

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. (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: Added Firefox in 2016

how to zoom any class or id in css3 on hover?

If you really want to "zoom" an element using CSS you should use a transformation and scale it to the size you want:

transform: scale(2);

This will scale the element and all of its content by a factor of 2.

Here's a fully working example:

CSS

.test {
    width: 100px;
    height: 100px;

    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;    
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;    
    transition: all 2s ease-in-out;
}

.test:hover {
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}

Demo

Try before buy (using transform and scale)

What you tried to do, was to change the dimensions of an element. That won't actually zoom the element but make it larger. Child-elements are not affected by this. You can achieve this easier by using a transition instead of an animation:

CSS

.test:hover {
    width: 200px;
    height: 200px;
}

Demo

Try before buy (using transition)

---

Related Topics