转换：在所有版本的Firefox中缩放非常缓慢 [英] transform: scale immensely slow in all versions of firefox

问题描述

请检查：

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

Safari浏览器的速度是正常的，但Firefox的缩放效果非常慢。

有趣的是，如果我加上：

  .item {
宽度：100px; 
 height：100px; 
} 
  

它似乎加快了一点（还不完全流利）。但是，这不是我的图像大小，所以看起来很乱：

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

如果我将项目宽度/高度到我的图像的大小，事情再次减慢：

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

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

任何想法都是这是为什么？我没有想法，我已经删除/添加了陈述，但似乎没有任何帮助。这是测试在不同的Firefox版本到10版。

谢谢，
Wesley

解决方案

为了让你的动画变得强大，你可以从 #container .item .thumbnail 中去掉 box-shadow / code>，这个属性很重，会减慢你的动画速度。

但是如果你仍然需要阴影效果，你可以尝试把它作为背景，而不是作为动画的一部分。




它应该做一些修改，但是从动画div中移除 box-shadow 属性会使它更快。 item zoomdiv是动画的负责人。通过从item类拆分zoom类，并在每个类上应用正确的css属性，动画应该更快。 （我已经试过用萤火虫）

HTML：

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

Please check this:

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

This has a normal speed in safari, but the zoom effect is really slow in firefox.

Interestingly, if I add:

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

it seems to speed up a little (still not completely fluent). But that is not the size my images are at, so it looks messed up:

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

If I set the item width/height to the size of my images, thing slow down again:

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

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

Any ideas as that what is the reason of this? I'm out of ideas, I've removed/added statements but nothing seems to help. This is tested in different firefox versions up to version 10.

Thanks, Wesley

解决方案

To get your animation boosted, you can remove the box-shadow property from #container .item .thumbnail, this property is heavy and slows your animation.
But if you still want the shadow effect, you can try putting it behind as a background and not as a part of the animation.

It should take some change, but removing the box-shadow property from the animated div will make it faster. The "item zoom" div is the one responsible for the animation. By splitting the "zoom" class from the "item" class, and applying the right css properties on each, the animation shall work faster. (I've tried it with firebug)

HTML:

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

这篇关于转换：在所有版本的Firefox中缩放非常缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！