Firefox：大型模糊元素的性能缓慢

Question

我在Firefox上面临一个小问题：当在dom上显示大量模糊元素时，一切都非常慢。

我注意到的一些事情：

• 在某些适度的配置中，回流事件甚至可以冻结标签
• 在高端GPU上，FPS略好一些，所以我猜这个过滤器是GPU激活的
• Chrome＆amp; Safari正在顺利运行
• 即使没有动画，CPU使用率非常高且任何互动都是滞后的

好的，告诉我代码

确保点击展开窗口以便显示所有图片，否则动画将保持平滑。

我正在创建一个带有填充动画的回流事件，故意对浏览器施加压力，但整体交互是滞后的。

在像CodePen这样的更复杂的网页上，FPS更糟糕：https://codepen.io/creaforge/pen/mLPqNg 即使没有触发变换编辑，这支笔也显示出一些性能问题（尝试选择代码块）

div {
  background-color: #eaeaea;
  transition: all .5s;
  padding: 20px;
}

div:hover {
  padding-bottom: 100px;
}

img {
  filter: blur(40px);
}

<div>Hover me --> slow animation</div><br/>

<img src="http://www.placecage.com/c/200/600">
<img src="http://www.placecage.com/c/200/610">
<img src="http://www.placecage.com/c/200/620">
<img src="http://www.placecage.com/c/200/630">
<img src="http://www.placecage.com/c/200/640">

Answer 1

使用translate而不是padding。使用填充动画对于您的计算机而言非常沉重。