Strange border-width behavior in Chrome - Floating point border-width?

Issue

Certain fluid designs, especially those involving %-width iFrames, seem to cause some strange rounding-type errors in Chrome (I've got version 21).

This Fiddle demonstrates the problem. Set the border to an integer pixel value, and the values you get back when you ask for them are floating point numbers slightly smaller than the expected value.

Trying the exact same code in CodePen doesn't yield the same results, presumably because the iFrame and other styles around it aren't set up the same way.

(I've also seen this behavior for the basic width and height attributes, although I was unable to replicate that part of the problem in jsFiddle.)

This doesn't seem to be a problem in Firefox or in IE8.

Any ideas as to what, specifically, is causing this strange behavior, and how I can work around it to get at the real values?

---

The plot thickens. In an attempt to shim around the problem, I found that values over 10px do not appear to be subject to the issue.

Also, based on @GionaF's comment, it appears to work properly in Chrome 22.

Solution

To reproduce your problem I have to change the zoom-level of Chrome. Changing the zoom-level back to 100% fixes it. It appears to be a bug, the calculated border width is always smaller than the defined border width, zooming in or out!

Your 10px border does give a value of 10 when the zoom-level is 110%, but on 125% it has the same problem as your 3px border.

edit: firefox has the same behavior!

Answered By - Willem