Ticket #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: | |
| Blocking: | Blocked by: |
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
-
jQuery.zip
(24.7 KB) -
added by djwo 5 years ago.
- test case and correction included
Change History
Changed 5 years ago by djwo
-
attachment
jQuery.zip
added
comment:1 Changed 5 years ago by djwo
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 4 years ago by brandon
- Status changed from new to closed
- Resolution set to wontfix
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.
Please follow the bug reporting guidlines and use jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.
test case and correction included