Webkit 和 jQuery 可拖动跳跃

作为实验，我创建了几个 div 并使用 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;
    }

然后我随机设计它们的样式并通过 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();

拖动有效，但我注意到仅在 webkit 浏览器中拖动 div 时突然跳跃，而在 Firefox 中一切正常。

如果我删除位置：绝对风格上，“跳跃”更糟糕。我认为 webkit 和 gecko 之间的变换原点可能有所不同，但默认情况下它们都位于元素的中心。

我已经进行了搜索，但只得出了有关滚动条或可排序列表的结果。

这是我的问题的工作演示。尝试在 Safari/Chrome 和 Firefox 中查看它。http://jsbin.com/ucehu/ http://jsbin.com/ucehu/

这是 webkit 中的错误还是浏览器渲染 webkit 的方式？

我绘制了一个图像来指示在不同浏览器上旋转后的偏移量，如 @David Wick 的答案。

如果您不想修补或修改 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;
        }
    });
});

或者你可以看到demo http://jsbin.com/ojoyuc/5