Rounding of Computed Style Values

John Resig <[email protected]>
Newsgroups gmane.comp.mozilla.devel.dom
Message-ID <[email protected]>
There has been a change in Firefox 3 concerning the computation of borders and parent elements. For example, in Firefox 2 the result would've been 56 - in Firefox 3 it's now 57. This is fine - 57 is what all other browsers return.

However, both Firefox 2 and 3 return precise values for computed style values, meaning that if you set a border to a em or % value it will return a value up to multiple decimal places. No other browsers do this (they all round off to the nearest whole number).

The crux of the problem is that when trying to compute the width of an element (offsetWidth - computedLeftBorder - computedRightBorder) you get different values inbetween Firefox 3 and all other browsers, for example:

IE6, Opera9, Safari2, Safari3: 30 == 30: 56 - 13 - 13
FF2: 30.333399999999997 == 30 (rounds down to 30): 57 - 13.3333 - 13.3333
FF3: 29.333399999999997 == 30 (rounds down to 29): 56 - 13.3333 - 13.3333

I've pulled together a test case which demonstrates the problem:
http://dev.jquery.com/~john/ticket/ff3-offset/test/

The obvious solution would've been for a library to just round off all computed style values, however doing so, at this point, will cause Firefox 2 to fail in this particular case (as its offsetWidth is "off by one"). If Firefox 3 were to keep it's value of 57, but round off returned computed style values, that would be an acceptable solution.

John Resig
lmpx.com only provides a reader for public news (NNTP) servers. It is not affiliated with the servers or forums shown here and is not responsible for the content of articles, which is written by their respective authors.