jquery - css缩放（-webkit-transform）div，它是jquery ui的子级，可拖动移动与拖动期间的光标不同

Question

我有一扇窗户，里面有一个孩子。孩子应该在窗户内移动。使用 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/ 孩子的移动速度比光标慢。如果缩放将> 1，它将移动得更快。如何解决？

PS：在变换translate(-25%, -25%)中是为了用固定的左上角进行缩放。

Answer 1

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