Warum verursachen meine CSS-Übergänge in Chrome Bildunschärfe und Bewegung?

CSS-Übergangseffekte verursachen Bildunschärfe und Bewegung in Chrome?

Das Problem mit CSS-Übergangseffekten, die Bildunschärfe und Bewegung in Chrome verursachen, kann sein wird auf die Einschränkungen von CSS-Übergängen beim Bearbeiten von Elementen in bestimmten Kontexten zurückgeführt.

Die Problem

Beim Anwenden eines Übergangs auf ein Element, das Bewegung beinhaltet (Übersetzen), kann es zu unerwünschten Nebenwirkungen kommen, wie zum Beispiel:

• Bildunschärfe
• Subtile Bewegung des Bildes um 1 Pixel

Dieses Problem ist ausgeprägter, wenn die Seite über Bildlaufleisten verfügt, und tritt besonders deutlich auf, wenn Es sind mehrere Instanzen des betroffenen Elements vorhanden.

Die Lösung

Um dieses Problem zu mildern, können Sie die folgenden CSS-Eigenschaften auf das betroffene Element anwenden Element:

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1, 1);

Erklärung

• -webkit-backface-visibility: versteckt: Diese Eigenschaft weist den Browser an, das zu behandeln Element als 2D, wodurch das standardmäßige Rendern der Rückseite verhindert wird, das dazu führen kann Artefakte.
• -webkit-transform: TranslateZ(0) Scale(1, 1): Diese Eigenschaft erzwingt, dass die Z-Achsen-Transformation immer 0 ist, was auch zur Erstellung des Elements beiträgt mehr 2D erscheinen.

Zusätzlich Hinweise

• Diesen Eigenschaften wurde ursprünglich für ältere Versionen von Chrome das Präfix -webkit- vorangestellt. In aktuellen Versionen können Sie jedoch die Versionen ohne Präfix verwenden:

backface-visibility: hidden;
transform: translateZ(0) scale(1, 1);

• Es wird empfohlen, die neuesten Versionen von Chrome zu verwenden, um optimale Rendering-Ergebnisse zu erzielen.
• Erwägen Sie die Verwendung der CSS-Eigenschaft für die Bildwiedergabe, um die Bildqualität bei Übergängen weiter zu verbessern, wie in den vorherigen Antworten beschrieben.

Das obige ist der detaillierte Inhalt vonWarum verursachen meine CSS-Übergänge in Chrome Bildunschärfe und Bewegung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!