Firefox and Chrome give different values for offsetTop

Question

I am trying to position an span element (let us call it \"the tooltip span\") relative to a input field. To do this, I am wrapping the tooltip span and the input field in anothe

Answer 1

I was experiencing the same problem, and tried adding to my function

$(document).ready(function(){}); 

and it worked in both Chrome and Firefox

Answer 2

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.

Answer 3

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!

Answer 4

It could be related to the different border/margin values for the HTML and body elements that browsers set by default.

Answer 5

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.

Answer 6

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