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

Question

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

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

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

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

这些都没有修复工件。

Answer 1

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