969917 - Imprecise calculation of element size (height/width) if element uses REM units.

Status: UNCONFIRMED

(Core :: Layout, defect, P5)

Description

[agamemnus]

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:27.0) Gecko/20100101 Firefox/27.0 (Beta/Release)
Build ID: 20140127194636

Steps to reproduce:

var display = document.getElementById("display")

document.documentElement.style.fontSize = '1.23px'
console.log (display.getBoundingClientRect().height)
// Correct value should be "123".
// Chrome: "123".
// Firefox 26: "123.333328247070311".
// IE11: "120".

document.documentElement.style.fontSize = '1.225px'
console.log (display.getBoundingClientRect().height)
// Correct value should be "122.5".
// Chrome: "122.5".
// Firefox 26: "123.333328247070311".
// IE11: "120".

http://jsfiddle.net/E8RgY/

Comment 1

[Manuela Muntean [Away]]

Attachment: screenshot.png

By opening http://jsfiddle.net/E8RgY/ I can see the same output with both latest Nightly and Chrome on Win 7 64-bit: please see the attached screenshot.

Is this what you're seeing, too?

Comment 2

[agamemnus]

Yes, but the screenshot doesn't tell the story... it is the console.log.

Comment 3

[[:Aleksej]]

Same 123.33332824707031 in 2014-02-12-03-02-01-mozilla-central-firefox-30.0a1.en-US.linux-x86_64.

Comment 4

[Boris Zbarsky [:bzbarsky]]

CSS lengths in Gecko are stored in fixed-point units: an integer number which should be divided by 60 to get the number of CSS pixels.

That means that we can only express lengths to the nearest 0.0166666.

1.23 * 60 == 73.8, so we can't express 1.23 exactly.  It gets rounded to 74/60 = 1.2333333

Which is why you see the values that you see.

Chrome seems to compute heights to the nearest 1/64px but store font-size as a float, maybe?  It's a bit hard to tell exactly what it's doing.

In any case, there are existing bugs tracking the limited precision of length units.  These are usually not an issue in practice because people don't actually use 1.23px fonts.

Comment 5

[agamemnus]

I realized I wasn't clear on the connection. It's a problem if you're using REMs to scale websites. Scaling sites with REMs and some Javascript (to adjust body font size based on window width/height) creates very fractional pixel font sizes even though the fonts themselves might not be. Do you have a link for the existing bug reports?