Opened 12 years ago
Closed 11 years ago
#2196 closed bug (wontfix)
Coords returned by offset method are false in a specific context with firefox
| Reported by: | djwo | Owned by: | brandon |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.2.3 |
| Component: | offset | Version: | 1.2.2 |
| Keywords: | offset coords jquery | Cc: | |
| Blocked by: | Blocking: |
Description
Hello,
I've just discovered a bug with the offset method included in jQuery 1.2.1. The coords returned by the offset methods are false with Mozilla Firefox if both TABLE element with a CAPTION element are used, AND if the CSS property « position : relative » has been applied to the TABLE element.
I am not a jQuery user but I like to analyse code from experts when I am in front of a difficulty. So, after many search, I have added this line of code for jQuery works (line 2950) :
// Mozilla doesn't take care of CAPTION element in offsetHeight => added manually
if (offsetParent.tagName == 'TABLE' && offsetParent.getElementsByTagName('CAPTION').length == 1 && jQuery.css(offsetParent, 'position').toLowerCase() == 'relative') {
add(0, offsetParent.getElementsByTagName('CAPTION')[0].offsetHeight);
}
And the code used to reproduce the bug :
<!DOCTYPE html SYSTEM "https://ov/netCFARegion/dtd/xhtml1-strict.dtd">
<style type="text/css">table {position : relative;}</style>
<script type="text/javascript" src="jquery-1.2.1.js"></script>
<script type="text/javascript">
/**
* Fonction de débuggage à l'écran.
* Mettre str='clear' pour effacer la zone de debug.
*
* @param sting str
*/
function write(str) {
myDiv = document.createElement('DIV');
myDiv.innerHTML = str;
debugBlock = document.getElementById('debug');
if (!debugBlock ) {
debugBlock = document.createElement('DIV');
debugBlock.id = 'debug';
with (debugBlock.style) {
position = 'absolute';right = '5px';top = '5px';padding = '3px';
width = "350px";minHeight = "150px";border = "1px solid #525D73";
backgroundColor = "#DEEBF9";
}
document.getElementsByTagName('BODY')[0].appendChild(debugBlock);
}
nbDiv = debugBlock.getElementsByTagName('DIV').length;
if (nbDiv % 2 == 0) myDiv.style.backgroundColor = '#BDD3EF';
if (str == 'clear') debugBlock.innerHTML = '';
else debugBlock.appendChild(myDiv);
}
function getPos() {
coords = $('#test').offset();
var elt = document.createElement('DIV');
elt.style.width = '14px';
elt.style.height = '14px';
elt.style.border = '1px solid red';
elt.style.position = 'absolute';
elt.style.top = coords.top + 'px';
elt.style.left = coords.left + 'px';
document.getElementsByTagName('BODY')[0].appendChild(elt);
write('top=' + coords.top);
write('left=' + coords.left);
}
</script>
</head>
<body onload="getPos()">
<table class="classical">
<caption>Caption</caption>
<tr>
<td id="test" style="border:1px solid blue">content</td>
</tr>
</table>
</body>
</html>
</code>
Tested with : OS : Windows XP Firefox : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
I am sincerly sorry for my poor english, it's very difficult for me to explain the bug. I made a post on this with a lot of expanations on my website (http://www.miasmatech.net) but this is in french. If you can understand french...
Congratulations for your job and greatings from french
Attachments (1)
Change History (3)
Changed 12 years ago by
| Attachment: | jQuery.zip added |
|---|
comment:1 Changed 12 years ago by
Ooops... I'm sorry, I forget to put the CSS "position:relative" in the example. The table is formated like this :
<table style="position:relative">
<caption>Caption</caption>
<tr>
<td id="test" style="border:1px solid blue">content</td>
</tr>
</table>
comment:2 Changed 11 years ago by
| Resolution: | → wontfix |
|---|---|
| Status: | new → closed |
This is to much of an edge case right now to incur the overhead within the core offset method. The simple workaround is to just include the height of the caption with the offset when in this situation.
test case and correction included