jquery - css 缩放(-webkit-transform)div 及其与 jquery ui 的子级可拖动移动在拖动过程中与光标不同

Question

我有一扇 window ，里面有一个 child 。 child 应该在 window 内移动。 使用 css 变换 (-webkit-transform) 缩放窗口。 我尝试过这样的事情:

html
<div class="window">
    <div class="rect"></div>
</div>​

css
.window
{
    width: 640px;
    height: 480px;
    background: gray;
    position: absolute;
    -webkit-transform: translate(-25%, -25%) scale(0.5);
}

.rect
{
    width: 60px;
    height: 40px;
    background: red;
}

js
$(function() {
    $('.rect').draggable({
        containment: 'parent'
    });
});​

​ 我已将其发布在这里 - http://jsfiddle.net/bLKQj/12/ child 移动得比光标慢。如果缩放比例 >1，则移动速度会更快。如何修复它？

PS:在变换中translate(-25%, -25%)用于使左上角固定缩放。

Answer 1

我想说为什么需要使用 CSS 转换？你真的应该尽可能避免它们，因为它们没有得到很好的支持，并且会产生像这样的意想不到的后果。您可以指定不同的高度和宽度吗？