Webkit重绘问题:变换比例+位置变化

Question

当我为变换和左/顶属性设置动画时,我发现了一些奇怪的(？)行为.我使用jQuery +一些帮助程序来处理转换(它只是添加了供应商前缀并做了一些修复,不应该是我正在谈论的问题的原因).因此,jquery工作得很好并且运行良好.当您单独设置变换比例和左/顶部动画时 - 它也可以工作,但不会在您同时进行.

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

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

我第一次在Chrome 12中看到过这个问题.我也在Safari 5.0.x中测试过并且没有问题,然后他们发布了5.1版本,在新版本中我们可以看到与Chrome相同的问题.在FF4-5中它工作正常.

任何人都可以向我解释Webkit浏览器的这种行为吗？

Answer 1

您需要在图层上触发硬件加速:

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