jquery.offset().top returns a different position in Firefox and Chrome

[j.vanhees@…]

When calling jQuery.offset().top in Chrome and Firefox, the number is much higher in Firefox than Chrome. I've tried removing all margin / padding (* { margin: 0; padding: 0; }), line-heights, but that shouldn't make a difference.

Testcase: ​http://www.bluebillywig.tv/jorick/inview/

Offset().top get's logged in the console on scroll.

[j.vanhees@…]

jsFiddle: ​http://jsfiddle.net/aPVK2/

[tylercrompton]

Does this cause any unexpected behavior (other than the obvious difference in values)?

[j,vanhees@…]

Replying to tylercrompton:

Does this cause any unexpected behavior (other than the obvious difference in values)?

No, but the answer the function gives back isn't correct (as far as I can measure).

[m_gol]

You have incorrect markup - span cannot contain div and the element you measure has div children which causes different behavior in Firefox (which doesn't extend span to contain div children) and Chrome (which does extend it). This causes different values to be returned from element.getBoundingClientRect() and - in consequence - different offset() values.

I'll leave it to others but for me it's notabug, you just should correct your markup.

[m_gol]

I'm closing it since it's caused by real difference in element sizes and positions in these browsers so jQuery correctly shows the difference.

[j.vanhees@…]

I understand, but the top of the element is at the same position in different browsers. That the height of the element has a different value, shouldn't make a difference, right?

[m_gol]

No, the bottom is in the same position, top differs. Open Firebug & Chrome Web Inspector and you'll see.

[j.vanhees@…]

You are correct indeed, the span is only around 20 pixels in height. I can fix this myself with a wrapper div, thanks for your time!