特定の条件下では、CSS キーフレーム アニメーションを停止する必要があります。後でページをスクロールすると、画面にアーティファクトが表示される傾向があります。アニメーションを停止する前に停止したdivがあった場所に表示されます。元の位置から以前にアニメーション化された div の新しい位置まで、これらのアーティファクトの「軌跡」を取得することがあります。
デスクトップ Chrome では、通常、アーティファクトは 1 つしか表示されません (アーティファクトの上に再描画すると、アーティファクトは消去されます) が、iOS Safari では、それらの痕跡がめちゃくちゃになります。
さまざまな方法を使用して CSS アニメーションを停止しようとしましたが、常に同じ結果になります。新しい場所(上/左、div自体は相対位置にあります)を定義するクラスをdivに追加し、アニメーションを停止するプロパティを追加してみました:
- アニメーションの長さを最小に設定します。
- -webkit-animation を「なし」に設定
- -webkit-animation-play-state を使用してアニメーションを一時停止する
これらのどれもアーティファクトを修正しませんでした。