3

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

Mat
  • 202,337
  • 40
  • 393
  • 406
ProblemsOfSumit
  • 19,543
  • 9
  • 50
  • 61
  • Probably related to sub-pixel rendering. – Inkbug Jul 27 '12 at 10:21
  • This means that browsers might not show and calculate the same numbers. As far as what to do, I don't know. – Inkbug Jul 27 '12 at 10:49
  • 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. – ProblemsOfSumit Jul 27 '12 at 10:52
  • I'm sorry - I really don't have much experience with stuff like this. It might help though to update the question with this data. – Inkbug Jul 27 '12 at 10:59

1 Answers1

5

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 whatnot.

If you just want the actual with the object is use getBoundingClientRect().width, which doesn't do the silly "round to integer" thing.

Boris Zbarsky
  • 34,758
  • 5
  • 52
  • 55
  • yeah it is a pretty complicated thing. Thanks for the function, it won't help me now but it will in future projects. I didn't know that one yet. – ProblemsOfSumit Dec 27 '12 at 01:31
  • I have a rendering bug where I'm using offsetWidth to set the sticky left property of elements to the left of the element being measured and I (sometimes!) get little gaps that show content scrolling underneath. Unfortunately, switching to getBoundingClientRect().width didn't fix the problem. – Alesh Houdek Jan 31 '20 at 21:53
  • It's really hard to say anything intelligent about your problem without seeing the exact markup, CSS, and script involved. – Boris Zbarsky Feb 03 '20 at 13:27