I’m working on code that programmatically positions a div to give the appearance of scrolling. All works fine when using Firefox and Internet Explorer (believe it or not). However, I’m getting bogus values from webkit browsers (Chrome/Safari). It appears to have something to do with whether an element has content. I’m calculating the position of an empty anchor element. Webkit seems to get it right only when the element has visible content. So, I could work around this by having some content in my anchor. However, that messes up my layout and feels like a kludge. Also, I’d like to log a bug, if that is indeed what I’m dealing with. Below is a sample document to illustrate the issue. Open it in the different browsers to see what I mean. Much thanks in advance! 🙂
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>What's Up with Webkit Anchor offset()?</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" ></script>
<script type="text/javascript">
var offsetAlert = function(calledBy){
var anchor = jQuery("a#anchor");
var span = jQuery("span#test");
var subheading = jQuery("span#targetSubHeading");
if (anchor.length == 1 && span.length == 1 && subheading.length == 1)
{
alert("offsetAlert(calledBy=["+calledBy+"])\n\tanchor.offset().top=["+anchor.offset().top+"]\n\nspan.offset().top=["+span.offset().top+"]\n\nsubheading.offset().top=["+subheading.offset().top+"]");
}
};
$(document).ready(function (){offsetAlert("jQuery.ready");});
</script>
</head>
<body style="background-color:#c6cbd1; margin:0px; padding:0px; border:none;" onload="javascript:offsetAlert('body.onload');">
<div>
<a name="top"></a><h2>Heading</h2>
This is the phenomemaly interesting text.
<br ><br >This is the phenomemaly interesting text.
<br ><br >This is the phenomemaly interesting text.
<br ><br >Internal Links: <a href="#a1">Sub-heading 1</a>, <a href="#a2">Sub-heading 2</a>, <a href="#a3">Sub-heading 3</a>, <a href="#anchor">Target Sub-heading</a>
<br ><br ><b><a id="a1"></a>Sub-heading 1</b>
<br >This is the phenomemaly interesting text.
<br><a href="#top">top</a>
<br ><br ><a id="a2"></a><b>Sub-heading 2</b>
<br >This is the phenomemaly interesting text.
<br><a href="#top">top</a>
<br ><br ><b><a id="a3"></a>Sub-heading 3</b>
<br >This is the phenomemaly interesting text.
<br><a href="#top">top</a>
<br ><br ><span class="anchor" id="test"><a id="anchor"></a></span><span id="targetSubHeading" style="font-weight:bold;">Target Sub-heading</span>
<br >This is the phenomemaly interesting text.
<br><a href="#top">top</a>
</div>
</body>
</html>
Okay, here’s an update. Thanks to Charles for the answer below. I updated my example to function to illustrate both the problem and the workaround I came up with based on Charles’ answer. This seems to work, but I’m still wondering if I should report this is a bug.
var offsetAlert = function(calledBy){
var anchor = jQuery("a#anchor");
var subheading = jQuery("span#targetSubHeading");
var displayCss = anchor.css("display");
anchor.css("display", "block");
var alteredOffset = anchor.offset();
anchor.css("display", (displayCss ? displayCss : ""));
if (anchor.length == 1 && subheading.length == 1)
{
alert("displayCss=["+displayCss+"]\nalteredOffset.top=["+alteredOffset.top+"]\noffsetAlert(calledBy=["+calledBy+"])\n\tanchor.offset().top=["+anchor.offset().top+"]\n\nsubheading.offset().top=["+subheading.offset().top+"]");
}
};
Thanks!
Here’s hopefully the last update. I checked Webkit and didn’t find this bug. So I added a new bug and a link to this question. Hopefully, this will get some attention and eventually get fixed. Here’s the link: http://bugs.webkit.org/show_bug.cgi?id=72524
BTW – I briefly had on here a link to an existing bug, but it turned out that it was for offsetHeight and not offsetTop.
From what I can see, this affects any inline-element without content. Changing the span-element to any block element or adding display: block; to the span-tag gives me the same values as in IE.