Webkit and jQuery draggable jumping

Question

As an experiment, I created a few div's and rotated them using CSS3.

    .items {          position: absolute;         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;     } 

I then randomly styled them and made them draggable via jQuery.

    $('.items').each(function() {         $(this).css({             top: (80 * Math.random()) + '%',             left: (80 * Math.random()) + '%',             width: (100 + 200 * Math.random()) + 'px',             height: (10 + 10 * Math.random()) + 'px',             '-moz-transform': 'rotate(' + (180 * Math.random()) + 'deg)',             '-o-transform': 'rotate(' + (180 * Math.random()) + 'deg)',             '-webkit-transform': 'rotate(' + (180 * Math.random()) + 'deg)',         });     });      $('.items').draggable(); 

The dragging works, but I am noticing a sudden jump while dragging the div's only in webkit browsers, while everything is fine in Firefox.

If I remove the position: absolute style, the 'jumping' is even worse. I thought there was maybe a difference in the transform origin between webkit and gecko, but they are both at the centre of the element by default.

I have searched around already, but only came up with results about scrollbars or sortable lists.

Here is a working demo of my problem. Try to view it in both Safari/Chrome and Firefox. http://jsbin.com/ucehu/

Is this a bug within webkit or how the browsers render webkit?

Answer 1

I draw a image to indicate the offset after rotate on different browsers as @David Wick's answer.

Here's the code to fix if you don't want patch or modify jquery.ui.draggable.js

$(document).ready(function () {     var recoupLeft, recoupTop;     $('#box').draggable({         start: function (event, ui) {             var left = parseInt($(this).css('left'),10);             left = isNaN(left) ? 0 : left;             var top = parseInt($(this).css('top'),10);             top = isNaN(top) ? 0 : top;             recoupLeft = left - ui.position.left;             recoupTop = top - ui.position.top;         },         drag: function (event, ui) {             ui.position.left += recoupLeft;             ui.position.top += recoupTop;         }     }); }); 

or you can see the demo