Flicker-Ausgabe mit Webkit-Transformation Transition

in einem Szenario, in dem ein Webkit-transformierter Übergang ein merktes Flicker verursacht, hier sind die Problemlösungen und die vorgeschlagenen Lösungen. Flicker

Der zugrunde liegende Grund für den Flicker stammt aus dem Rendering -Prozess des Browsers. Bevor der Übergang initiiert wird, macht der Browser das Element in seinem endgültigen transformierten Zustand kurz und führt zu einer unerwünschten visuellen Störung. CSS-Eigentum zum Element:

-webkit-backface-Sichtbarkeit: Hidden;

Diese Eigenschaft verhindert, dass der Browser das Hintergesicht des Elements rendert, um sicherzustellen, dass der Übergang zwischen den Zuständen glatt und nahlos ist. Die ursprüngliche Abfrage, dieses Problem, wirkt sich in erster Linie auf Safari aus. Obwohl die Animation in anderen Browsern funktionieren kann, kann der Flacker ausschließlich in Safari bestehen. Durch die Anwendung der oben genannten Lösung kann dieses visuelle Artefakt beseitigt werden.