What Bug Does Zoom:1; Fix in CSS

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

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).

CSS Zoom property not working with BoundingClientRectangle

This comment on the bug report goes into some detail reg. the issue, but its status appears to be 'WontFix', so you're probably out of luck there.

Some alternatives:

• If you were to use transform: scale(1.5) instead of zoom, you'd get the correct value in getBoundingClientRect(), but it would mess with the page layout.
• You could use window.getComputedStyle(div[0]).zoom to get the zoom value of the element (in decimals) and multiply it with the width from getBoundingClientRect()

Unexpected/Incorrect scale size for transform: scale when zoom in/out chrome browser

It is a bug... caused by the fact these browsers round coordinates to avoid antialiasing.

So when you set your zoom level to 120%, the small square should actually be rendered as a 1.2px*1.2px square prior transform.

But webkit browsers will round this value to 1px, even before they apply the transformation (I think FF also does but probably after transform).

So you won't see a change until you get to zoom 150%, where now it will get rounded to 2px and your blue square will get bigger than the same 100px*100px.

Only at 200% will they match again.

Not much to do to circumvent this, apart letting them know, and avoiding playing with such small elements ;-) (using a 10px*10px square and dividing the transform zoom level by 10 would prevent this bug).

What Does 'zoom' do in CSS?

Zoom is not included in the CSS specification, but it is supported in IE, Safari 4, Chrome (and you can get a somewhat similar effect in Firefox with -moz-transform: scale(x) since 3.5). See here.

So, all browsers

 zoom: 2;
 zoom: 200%;

will zoom your object in by 2, so it's like doubling the size. Which means if you have

a:hover {
   zoom: 2;
}

On hover, the <a> tag will zoom by 200%.

Like I say, in FireFox 3.5+ use -moz-transform: scale(x), it does much the same thing.

Edit: In response to the comment from thirtydot, I will say that scale() is not a complete replacement. It does not expand in line like zoom does, rather it will expand out of the box and over content, not forcing other content out of the way. See this in action here. Furthermore, it seems that zoom is not supported in Opera.

This post gives a useful insight into ways to work around incompatibilities with scale and workarounds for it using jQuery.

CSS Diagonal line has whitespace on zoom

I've dealt with similar problems, though not this exact one, and I believe the cause, ultimately, is a rounding error that ends up leaving a spare pixel. It's a browser bug that you won't fix with CSS alone, and transform: translateY(1px) might be the only guaranteed fix to the above code.

But, we can probably avoid that bug just by creating this effect by different means.

div {    position: relative;    width: 100%;    height: 212px;    background-color: orange;    -webkit-clip-path: polygon(100% 0, 100% calc(100% - 40px), 0 100%, 0 100%, 0 0);    clip-path: polygon(100% 0, 100% calc(100% - 40px), 0 100%, 0 100%, 0 0);}

<div></div>

@media screen and (min-width: 2560px) {
  table, table * {
    border: solid 1px black !important;
  }
  /* or */
  * {
    border: solid 1px black !important;
  }
}