转换：在所有版本的Firefox中缩放非常缓慢

问题描述

请检查：

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

有趣的是，如果我加上：

 中去掉 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中缩放非常缓慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！