Home/ Questions/Q 8292971
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T13:40:28+00:00

Somehow I get different results for offsetWidth in Firefox and Chrome. I got a

  • 0

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.

  • sadly I’m not allowed to post images yet

Picture1 https://i.stack.imgur.com/2YMNt.png

Picture2
https://i.stack.imgur.com/HiH9o.png

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0