Warum flackert meine CSS-Animation auf dem iPhone und wie kann ich das beheben?

Flimmernde CSS-Animationen im iPhone WebKit

In einer iPhone-Anwendung verursachten CSS-Animationen, die in einem Spiel verwendet wurden, ein Flackern. Das Flackern trat auf, wenn Elemente nach dem Scrollen einrasteten. Die einzigen verwendeten WebKit-Animationen dienten dem Übergang (entweder sofort oder 0,2-Sekunden-Ease-out) und der Übersetzung.

Nachdem Sie auf „Artikel zuordnen“ und anschließend auf „Erneut abspielen“ geklickt haben, wurde der gesamte Hintergrund der Accessoires/Geldbörsen weiß während der Animation der einrollenden Waffen.

Lösung:

Hinzufügen -webkit-backface-visibility hat dazu beigetragen, das Flackern zu reduzieren, aber ein anfängliches Flackern blieb nach dem Neuladen der Seite bestehen. Die vollständige Lösung umfasste das Hinzufügen von -webkit-perspective: 1000. Mit dieser zusätzlichen Eigenschaft wurde das Flackern beseitigt.

Der Code zur Behebung des Problems:

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

Das obige ist der detaillierte Inhalt vonWarum flackert meine CSS-Animation auf dem iPhone und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!