jquery offset issue

getBoundingClientRect() gives inconsistent values when css3 transforms (rotate) are applied. firefox ignores the transform webkit doesn't.

by dwick

HTML

<script>document.documentElement.getBoundingClientRect = undefined;</script>
<div id="box">
    <div id="getBoundingClientRect">
        <label>getBoundingClientRect()</label>
        left: <span class="left"></span>
        top: <span class="top"></span>
    </div>
    <div id="jqueryoffset">
        <label>$.fn.offset()</label>
        left: <span class="left"></span>
        top: <span class="top"></span>
    </div>
    <div id="offsetXXX">
        <label>offsetXXX</label>
        left: <span class="left"></span>
        top: <span class="top"></span>
    </div>
</div>

CSS

label { font-weight: bold; display:block; clear:both; }
#box { 
    position: absolute;
    left: 200px;
    top: 200px;
    width: 400px;
    height: 200px;
    cursor: pointer;
    background: #FFC400;
    -moz-box-shadow: 0px 0px 2px #E39900;
    -webkit-box-shadow: 1px 1px 2px #E39900; 
    box-shadow: 0px 0px 2px #E39900;
    -moz-border-radius: 2px; 
    -webkit-border-radius: 2px; 
    border-radius: 2px; 
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
  }

JavaScript

$('#getBoundingClientRect .left').html($('#box')[0].getBoundingClientRect().left)
$('#getBoundingClientRect .top').html($('#box')[0].getBoundingClientRect().top)
$('#jqueryoffset .left').html($('#box').offset().left)
$('#jqueryoffset .top').html($('#box').offset().top)
$('#offsetXXX .left').html($('#box')[0].offsetLeft)
$('#offsetXXX .top').html($('#box')[0].offsetTop)