4

特定の条件下では、CSS キーフレーム アニメーションを停止する必要があります。後でページをスクロールすると、画面にアーティファクトが表示される傾向があります。アニメーションを停止する前に停止したdivがあった場所に表示されます。元の位置から以前にアニメーション化された div の新しい位置まで、これらのアーティファクトの「軌跡」を取得することがあります。

デスクトップ Chrome では、通常、アーティファクトは 1 つしか表示されません (アーティファクトの上に再描画すると、アーティファクトは消去されます) が、iOS Safari では、それらの痕跡がめちゃくちゃになります。

さまざまな方法を使用して CSS アニメーションを停止しようとしましたが、常に同じ結果になります。新しい場所(上/左、div自体は相対位置にあります)を定義するクラスをdivに追加し、アニメーションを停止するプロパティを追加してみました:

  1. アニメーションの長さを最小に設定します。
  2. -webkit-animation を「なし」に設定
  3. -webkit-animation-play-state を使用してアニメーションを一時停止する

これらのどれもアーティファクトを修正しませんでした。

4

2 に答える 2