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

Question

在某些条件下，我必须停止CSS关键帧动画。如果我之后滚动页面，我倾向于在屏幕上接收文物。在停止动画之前，它们出现在我停止的div的位置。有时我会从原始位置到先前动画div的新位置获得这些文物的“踪迹”。

在桌面Chrome中，通常我只看到一个工件（重新绘制一个工件会删除它），但在iOS Safari中，我有一个混乱的痕迹。

我尝试使用不同的方法停止CSS动画，我总是得到相同的结果。我在div中添加了一个类来定义一个新位置（上/左，div本身位于相对位置），以及一个停止动画的属性，我试过了：

1. 将动画持续时间设置为最小。
2. 将-webkit-animation设置为'none'
3. 使用-webkit-animation-play-state
暂停动画

这些都没有修复过这些文物。

Answer 1

将此添加到您调用animitions的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);
}