html element width is less than the sum of width of individual child elements?

Question

http://jsfiddle.net/3BFGU/71/

Width of the html parent element (calculated using 1$(el).width()1) is less than the combined width of child elements.

1. Happens only in Firefox.

Any idea why this could be happening ?

Answer 1

Probably, total width is a sum of widths and these fractional widths were previously rounded in some way. This sum is not equal to width of container. I found that more elements produce more inaccuracy e.g. 3 pixels difference for 5 elements.

Actualy, inline text block can have fractional width, for example 10.6px . So, three of those blocks placed in a row will take 31.8px ≈ 32px. But when each width rounded to ≈ 11px * 3 = 33px in total. Here is the one pixel defference. http://jsfiddle.net/3BFGU/86/

n.b. Firefox' font rendering engine start to use subpixel letter placement only when font-size > 15px (for at least Verdana, Arial and Segoe UI, which have extreme hinting applied). When less every letter have integer width value and all same letters in the string have exactly same raster image. This behaivior clearly seen with letter-spacing: .9px; and switching between font-size: 14.9px; and font-size: 15.1px;

Besides that, a year ago I made a little playground to test rendering engines of different browsers.

Answer 2

Looks like a bug in Firefox....possibly a rounding error?

The error isn't consistent. If you add a space inside the second span, after 'new' it then calculates correctly (I am testing on 14.0.1).

http://jsfiddle.net/DigitalBiscuits/3BFGU/81/

Also if you change the last 'w' to a capital again, it calculates correctly. http://jsfiddle.net/DigitalBiscuits/3BFGU/83/

this would lead me to believe it's down to the way firefox is calculating the size of elements in pixels, and there must be some rounding, up or down, involved that's causing this discrepancy.

~Edit~

I've just updated to 15.0 and am getting the same results. I'll test on all versions until I'm fully updated and let you know the results.

Same again on 15.0.1, the latest version