Chrome 12.0.742.100 and jQuery.position()

This test demonstrates issues relating to the getting the position and offset of empty elements using jQuery.position() and jQuery.offset(), particularly in Chrome 12.0.742.100.

by arzynik

HTML

<div id="wrap">
    This test demonstrates issues relating to the getting the position and offset of empty elements using <b>jQuery.position()</b> and <b>jQuery.offset()</b>, particularly in Chrome 12.0.742.100.
    <br /><br />
    <span style="color:#3aa544">Green</span> boxes mean it passes the test and both empty and full elements are able to get a position. <span style="color:#ff5050">Red</span> means it failed, and was not able to get a position for empty elements.
    <br /><br />
    <div class="push">
        Enter a list of tags to check, separated by commas:
        <form onsubmit="$.check(); return false;">
            <input type="text" id="tags" value="a,p,div,span,header,footer,h1">
            <button onclick="$.check();">Check</button>
        </form>
    </div>
    <br />
    <b>Offset:</b><br />
    <div id="test-offset" class="test-results reset"></div>
    <div class="divider"></div>
    <br />
    <b>Position:</b><br />
    <div id="test-position" class="test-results reset"></div>
    <!-- use me for a simple test
    <a id="find-me"></a>
    <a id="find-me2">asd</a>
    -->
</div>
<div class="divider"></div>
<div id="test-zone" class="reset"></div>

CSS

.label { font-weight: bold; }
.push { padding: 4px; background: #303030; color: #fff; }
.push input { border: 1px solid #000; width: 400px; }
.test-wrap { border: 3px solid #ddd; margin: 2px; float: left; width: 80px; height: 20px; font-size: 14px; text-align: center; padding: 0; }
.tester { margin: 0; padding: 0; height: 1px; width: 1px; }
.test-results { clear: both; }
#test-zone { visibility: hidden; }
.tester-empty, .tester-full { height: 10px; width: 10px;}
.divider { clear: both; }
form { margin: 0; }
.fail { background: #ff5050; }
.pass { background: #61e46e; }
body, input { font: 14px trebuchet ms, lucida grande, arial, sans-serif; }

JavaScript

$(function() {
    $.check = function() {
        els = $('#tags').val().split(',');
        $('.reset').html('');
        $('.test-wrap').removeClass('fail pass');
        for (var x in els) {
            $('#test-offset').append('<div class="test-wrap" id="result-offset-' + x + '"><span class="label">' + els[x] + '</span></div>');
            $('#test-position').append('<div class="test-wrap" id="result-position-' + x + '"><span class="label">' + els[x] + '</span></div>');
            $('#test-zone').append('<' + els[x] + ' class="tester-empty" id="te-' + x + '">', '<' + els[x] + ' class="tester-full" id="tf-' + x + '">content</' + els[x] + '>');
            var c = $('#te-' + x).offset().top === 0 ? 'fail' : 'pass';
            $('#result-offset-' + x).addClass(c);
            c = $('#te-' + x).position().top === 0 ? 'fail' : 'pass';
            $('#result-position-' + x).addClass(c);
        }
    };

    $.check();
/* use me for a simple test
    console.log($('#find-me').offset().top); // result: 0
    console.log($('#find-me2').offset().top); // result: 308
    console.log($('#find-me').position().top); // result: 0
    console.log($('#find-me2').position().top); // result: 308
    */
});