Zoom-out bug in chrome, IE, etc, with borders?

Question

Simple test case:

http://cssdesk.com/K2xmN

Another Example:

http://developer.nokia.com/

Problem: When you change the zoom page to 90%, the border goes to 1.111 (1.333 at 75%) and breaks the layouts.

In the nokia website, you can see the top containers break because there is no space left. In the CSSDesk testcase, if you inspect the computed styles, you can see the border width going higher.

Why this happen? border is not set in EM or %, why does it scale?

Answer 1

The why has been explained but I though I'd share a workaround which I just discovered: Often you can replace the border with a box-shadow that looks just like a border but doesn't add to the outer width of the element:

Instead of

border: 1px solid red;

write

box-shadow: inset 0 0 0 1px red;
width: 102px;
height: 102px;

The width and height of the div have to be adjusted accordingly to accomodate to the fact that the 1px of the borders on each side are gone now. Now when zooming out the browser will still treat the box-shadow the same as the border, i.e. it won't shrink below 1px, but it will not influence the width of the element and thus the layout won't break.

Alternatively, you can probably use box-sizing: border-box; to some similar effect.

Answer 2

This is an artifact of the problem of scaling down a 1px border. To illustrate what happens, I have modified your test case to include zoom: 0.5; in the css: http://cssdesk.com/zn4Lx

Notice that if you inspect the computed style, the border width will be 2px. What happens is that Chrome tries to scale down the element, but after scaling, the border still has to be 1px wide if it is to remain visible (after all, 1px is the smallest unit that can be rendered on the computer screen, and if the border width is scaled down to a floating point number smaller than 1.0, it will be rounded down to 0px and disappear). But to justify the scaling, it over-compensates by adjusting the initial width to satisfy the equation

new_width = old_width * scale

In this example, since new_width = 1px, and scale = 0.5, it re-calculates old_width as 2px. Note however that the actual width of the border that is rendered after the scaling is still just 1px.

So in your example, the adjusted old width will be approximately 1.11111111px, and the rendered border width will be 1px wide, but since all the other widths in the layout that are larger than 1px also have been scaled down by approximately 90%, there is no room for a 1px wide border, which results in a broken layout.