Fractional part of pixels on Firefox/Firebug

Question

Today I stumbled on a simple box styled as follow:

div.menubox {
    background-color: #FFFFFF;
    border: 1px solid #887777;
    border-radius: 0 5px 5px 0;
    box-shadow: 1px 1px 3px #998888;
    font-family: Lato,sans serif;
    font-size: 12px;
    left: -5px;
    margin-bottom: 2em;
    min-height: 675px;
    overflow: hidden;
    padding: 25px 0 2em;
    position: absolute;
    top: 195px;
    transition-duration: 0.5s;
    transition-property: top;
    width: 215px;
    z-index: 99;
}

It contains an ul and several li. Nothing of exceptional until i ask to firebug to print in console the menubox height.

console.log(document.getElementById("menubox").offsetHeight) returns an outstanding "677.2px".

It is the first time I step on such strange behaviour (I'm running firefox 17, with firebug 1.10.6, with a bunch of plugins, on an old windows XP installation).

It is a known issue of one of the component or a new "feature"?

ADDENDUM

Removing the border-shadow, border-radius css properties (disabled by via firebug) the result doesn't change.

chrome reports "649.5999755859375px" uhmm... need further investigation of the
underlying javascript code

EXTRA Ops, the javascript code was a dead line filling a variable, the true code is console.log(document.id("menubox").getStyle("height))` so mootools 1.4.5 is the main suspected (issuing manually the command on console return an integer pixel count) on both browser.

The question is still live, though, have you encountered a similar behaviour, there is a workaround (beside rounding manually the result)?

Related: [this question](http://stackoverflow.com/questions/9080633/can-a-css-pixel-be-a-fraction), and [this post](http://ejohn.org/blog/sub-pixel-problems-in-css/). — bfavaretto, Nov 22 '12 at 16:37
What exactly is odd here? Some UAs do subpixel layout (and nowadays in many situations you get sub-CSS-pixel rendering, on high-dpi screens). — Boris Zbarsky, Nov 23 '12 at 04:57
@BorisZbarsky the oddity was my ignorance, I didn't know that firefox on xp can return fractional values. — Eineki, Nov 23 '12 at 16:35
@Eineki Ah, ok. Yeah, Firefox on all OSes, and IE9+ on the OSes it supports can do that, and others are working on it. — Boris Zbarsky, Nov 24 '12 at 03:12

score 0 · Accepted Answer · answered Nov 25 '12 at 10:33

Fractional parts on pixels is not strange in CSS as it is not a "dott" on the screen rather an angular measurement.

From the CSS 2.1 documentation:

"Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.”

More information can be found here: http://inamidst.com/stuff/notes/csspx

My guess is that you are mixing em:s with px:s and that will cause fragmented pixel values to be returned. Please note that there is nothing wrong with the behavior so I would not care as long as you don't run into trouble. Especially as you only have defined a min-height on the DOM-element.

Fractional part of pixels on Firefox/Firebug

1 Answers1