CODEWITHSUNDEEP
javascripthtmlcss
Rikard
Rikard

Reputation: 7805

offsetWidth not same in different Browsers

I have a difference of 1px between FF and Chrome in element.offsetWidth.

I have been reading trying to understand the problem. Tried to reset the CSS, tried to move the element away from near the screen borders (I remember old IE was inacurrate if 10px near the screen broder). Found this answer about FF needing a setTimeout, but no answer about why...

Still no solution. I'm looking to understand/fix it with vanilla JS or CSS.

Question:

Why is this and what can I do in my CSS to get the values consistent?

jsFiddle: http://jsfiddle.net/f35j2/show/

html

<div id="wrapper" style="width: 203px; height: 203px;">
    <div id="inner" style="width: 50%; height: 50%; margin: auto; display: block;"></div>
</div>

Upvotes: 2

Views: 2568

Answers (2)

Nitesh
Nitesh

Reputation: 96

When I opened your jsfiddle link in chrome and firefox and analysed the values what I got is:

  • In both browsers (Firefox and Chrome) the CSS calculate value of height and width (for #inner) is same i.e. 101.5px
  • While drawing the element, FF uses round down for fractional values. Thus, the drawn height and width is 101px.
  • But Chrome is using round up/down to nearest integer for height. i.e. any value between 100.5 to 101.4999 will be treated as 101, and 101.5 to 102.4999 will be 102
  • But for width the calculation is only round down. i.e. any value from 101 to 101.9999 will be treated as 101

Refer the snapshot below snapshot . You can exercise the same with boundary values (e.g. 101.4999, 101.9999) to get more idea of this.

Upvotes: 1

Eman Z
Eman Z

Reputation: 167

The width of the inner element is a non integer. FF and Chrome are rounding the number differently. You can get the exact width by using inner.getBoundingClientRect().width (which is 101.5)

This is because the parent element is 203px. Not 202 or 204.

Upvotes: 4

Related Questions