performance - 变换 : scale immensely slow in all versions of firefox

Question

请检查:

http://users.telenet.be/prullen/grid.html

这在safari中速度正常，但是在firefox中缩放效果真的很慢。

有趣的是，如果我添加:

.item {
      width:100px;
      height:100px;
}

好像有点提速(还是不完全流畅)。但这不是我的图像的大小，所以它看起来很乱:

http://users.telenet.be/prullen/grid2.html

如果我将元素的宽度/高度设置为图像的大小，速度又会变慢:

.item {
      width:160px;
      height:160px;
}

http://users.telenet.be/prullen/grid3.html

任何想法，这是什么原因？我没有主意，我已经删除/添加了声明，但似乎没有任何帮助。这在版本 10 的不同 firefox 版本中进行了测试。

谢谢， 卫斯理

Answer 1

要增强动画效果，您可以从 #container .item .thumbnail 中删除 box-shadow 属性，此属性很重并且会减慢动画速度。
但是如果你仍然想要阴影效果，你可以尝试把它作为背景而不是作为动画的一部分。

它应该进行一些更改，但是从动画 div 中删除 box-shadow 属性会使它更快。 “元素缩放”div 负责动画。通过将“zoom”类与“item”类分开，并在每个类上应用正确的 css 属性，动画将运行得更快。 (我已经用 Firebug 试过了)

HTML:

<div class="item">
  <div class="zoom">
    <div class="thumbnail">
        <img src="...">
    </div>
  </div>
</div>