Webkit重绘问题：变换比例+位置改变

Question

我在为 transform 和 left/top 属性设置动画时发现了一些奇怪的（？）行为。我使用 jQuery + 一些助手来处理转换（它只是添加了供应商前缀并进行了一些不应该成为我正在谈论的问题的原因的修复）。所以，jquery 工作得很好并且做得很好。当您分别为变换比例和左/上设置动画时 - 它也可以工作，但当您一起执行时则不行。

这是我的演示示例：http://noname.vrn.ru/transform/test.html

正如您在动画期间看到的那样，两个属性都会发生变化，但位置属性不会影响屏幕 - http://vns.ru/screenshots/transform-20110806-140111.png。接下来，当动画完成时，您可以更改窗口大小，并且块将保持在动画期间应该保持的新位置。因此，这意味着在调整大小发生“重绘”过程后，元素会改变它的位置。但是每次动画步骤都会发生重绘过程，那么，为什么'left'属性的新值不适用？

我第一次在 Chrome 12 中看到这个问题。我也在 Safari 5.0.x 中测试过，那里没有问题，然后他们发布了 5.1，在新版本中我们可以看到与 Chrome 中相同的问题。在 FF4-5 中它运行良好。

谁能向我解释一下 Webkit 浏览器的这种行为？

Answer 1

需要在层上触发硬件加速：

#block {
    -webkit-transform-style: preserve-3d;
}