Somehow I get different results for offsetWidth in Firefox and Chrome. I got a simple button
<button class="someClass">Dropdown<i class="iconRight iconArrowDown"></i></button>
which's offsetWidth is exactly 89 Pixels. Chrome says so and Photoshop does too. Even in Firefox it is DISPLAYED as a 89 Pixel Element, but Firebugs offsetWidth
says it has 90 Pixels. jQuery gets also 90 Pixels in Firefox for outerWidth()
.
As I use the width to calculate it needs to be exactly right.
Picture1
Picture2
Why is the offsetWidth
property wrong in firefox?
EDIT from Comments:
I'm using a custom font. Disabling the font solves the problem. However testing this with a custom font on FF+Linux, FF+Win7 and Chrome+Win7 - Firefox on Windows 7 is the only Browser where the displayed width differs from the computed offsetWidth. Even though - due to font-rendering - the button has 91 Pixels on Linux, there is no problem in the calculations as the displayed width is the same. For now I probably simply have to live with that
Chances are the real width is a non-integer number of pixels between 89 and 90. When computing offsetWidth
, the real width is rounded to nearest integer. When painting, what you see will depend on the exact antialiasing algorithms used and other factors.
If you just want the actual width of the object, use getBoundingClientRect().width
, which doesn't do the silly "round to integer" thing.