Side navigation
#13696 closed bug (notabug)
Opened March 29, 2013 03:52PM UTC
Closed April 04, 2013 04:35AM UTC
Last modified April 05, 2013 08:04AM UTC
jquery.offset().top returns a different position in Firefox and Chrome
| Reported by: | j.vanhees@bluebillywig.com | Owned by: | |
|---|---|---|---|
| Priority: | undecided | Milestone: | None |
| Component: | unfiled | Version: | 1.9.1 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
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.
Attachments (0)
Change History (8)
Changed March 29, 2013 04:06PM UTC by comment:1
Changed April 02, 2013 12:29AM UTC by comment:2
Does this cause any unexpected behavior (other than the obvious difference in values)?
Changed April 02, 2013 07:47AM UTC by comment:3
Replying to [comment:2 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).
Changed April 02, 2013 10:06PM UTC by comment:4
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.
Changed April 04, 2013 04:35AM UTC by comment:5
| resolution: | → notabug |
|---|---|
| status: | new → closed |
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.
Changed April 04, 2013 07:44AM UTC by comment:6
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?
Changed April 04, 2013 04:27PM UTC by comment:7
No, the bottom is in the same position, top differs. Open Firebug & Chrome Web Inspector and you'll see.
Changed April 05, 2013 08:04AM UTC by comment:8
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!
jsFiddle: http://jsfiddle.net/aPVK2/