ansaurus

Question

Firefox and Chrome give different values for offsetTop

Answer 1

A:

Put you code into a window.onload function. I recall having issues when attempting to work with the dom directly from a <script> during page load in firefox, and webkit tends to be slightly more willing to give a sane DOM at such points.

This is just based on prior issues i've encountered, i'm not sure if it's applicable to your case.

olliej 2009-09-24 18:53:11

Answer 2

+1 A:

Use jQuery. DOM differences between browsers is one of the things it excels at.

Mike Blandford 2009-09-24 18:55:35

Holy rusted metal! I was going to say that this is not one of those problems where JQuery is the answer. But it turns out that there is a position() function I was not aware of, that really does the trick. The question still remains why Chrome/Safari reports the offset differently. But you get the check.

waxwing 2009-09-25 08:26:44

Answer 3

A:

I ran into the same problem, and jQuery's position() function was reporting the same as the offset() function. Ultimately it turns out that even waiting for the document to be ready didn't work for me. I had to check offset() later in the flow (in my case, in my handler that is fired on a window.scroll event).

When I try this test code below, on page load, I get different figures for Firefox + Chrome. Once it loads, however, I can press 'd' and I get the same figure for both browsers.

// this produced different results on Chrome + Firefox (Chrome was wrong!)
$(document).ready(function () {
   var x =  $('#some-div-on-your-page').position().top;
   alert("On load, offset is "+x);   // Chrome + Firefox report diff figures

  $(window).keydown(function(e, r) {
     k = e ? e.keyCode : event.keyCode;
     if(k == 68) {      // press 'd'
        var x =  $('#some-div-on-your-page').position().top;
        alert("Now the offset is "+x); // ...but this is consistent
     }
   });
}

Hope this helps.

Eric 2010-07-13 22:46:03

Answer 4

A:

Hi there, I've been having the same problem as you and I realized that (in my case) the thing that was messing up the offset().top value in chrome, was having one or more images without the "height" attribute above the element.

Before

<img src="/images/foo.jpg" />

offset.top() was 100 in Chrome

offset.top() was 150 in Firefox and IE7 (beleive or not, it worked just fine in IE!)

After

<img src="/images/foo.jpg" height="50" width="50" />

offset.top() is 150 in both Firefox, IE7, AND CHROME.

Notice the the difference was 50px, which is actually the same as the image height.

Since I was developing a JQuery plugin, i tryed to collect all the images that had their width and height attributes undefined, and manually setting their size with .width() and .height(), but it didn't work, because Chrome returned 0 for both functions. So, i guess the problem with offset.top() actually relies on that. If JQuery is triying to get te offset.top() value by accumulating the "above" element's height, and one of those elements it's an image with no specified height, "0" will be added to that sum, and therefore the top value will be missing those "ignored" heights.

PS: Sorry for my english, it's been a long time since i wrote such a long text in this language!

Nicolas 2010-10-19 15:57:05

ansaurus

tags:

views:

answers:

Firefox and Chrome give different values for offsetTop

related questions