如何在停止CSS动画后滚动页面时防止工件出现在Webkit中

Question

在某些情况下，我必须停止CSS关键帧动画。如果我随后滚动页面，我倾向于在屏幕上接收伪影。它们出现在我停止动画之前停止的div所在的位置。有时，我会得到这些工件的"踪迹"，从原来的位置到以前动画分区的新位置。

在桌面Chrome中，通常我只看到一个工件(在工件上重新绘制会擦除它)，但在iOS Safari中，我对它们的跟踪很混乱。

我尝试使用不同的方法停止CSS动画，结果总是一样。我在div中添加了一个类，它定义了一个新的位置(左上角，div本身位于相对位置)，以及一个停止动画的属性，我尝试了：

1. 将动画持续时间设置为最小值
2. 正在将-webkit动画设置为"none">
3. 使用-webkit动画播放状态暂停动画

这些都没有修复工件。

Answer 1

将其添加到您称之为animations的css中：

-webkit-transform: translate3d(0,0,0);

它强制硬件加速。

Answer 2

我也遇到了这个问题。

translate3d应应用于所有涉及显示工件的子项。

为滚动容器及其内部所有子项工作CSS

.scrolling-container {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.scrolling-container .child-element {
position: relative;
-webkit-transform: translate3d(0,0,0);
}