Bug Tracker

#2196 closed bug (wontfix)

Opened January 20, 2008 08:39AM UTC

Closed March 17, 2009 09:25PM UTC

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)
  • jQuery.zip (24.7 KB) - added by djwo January 20, 2008 08:40AM UTC.

    test case and correction included

Change History (2)

Changed January 21, 2008 04:49AM UTC by djwo comment:1

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>

Changed March 17, 2009 09:25PM UTC by brandon comment:2

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.