Warum führen meine CSS-Übergänge dazu, dass Bilder in Chrome unscharf werden?

CSS-Übergangseffekt verursacht verschwommene Bilder oder Bewegungen in Chrome

Problem:

Beim Anwenden eines CSS-Übergangseffekts, der dazu führt Beim Verschieben einer Unterteilung zeigt Chrome unerwünschtes Verhalten, z. B. dass das Bild in der Unterteilung unscharf wird oder leicht verschoben wird. Dieses Problem besteht nur dann, wenn die Seite über Bildlaufleisten verfügt.

Lösung:

Um diese Effekte zu verhindern, implementieren Sie das folgende CSS Änderungen:

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
}

Erklärung:

• -webkit-backface-visibility: versteckt: Deaktiviert das Rendern der Rückseite der Abteilung, was für einfache Übersetzungen und Transformationen unnötig ist.
• -webkit-transform: translatorZ(0) scale(1, 1); Setzt die Z-Achsen-Verschiebung der Teilung auf Null und skaliert sie auf die ursprüngliche Größe zurück, um sicherzustellen, dass das Bild an Ort und Stelle bleibt.

Aktualisierung 2020:

• Erwägen Sie bei verschwommenen Bildern die Verwendung der CSS-Eigenschaft für die Bildwiedergabe, wie in anderen vorgeschlagen Antworten.
• Für Barrierefreiheit und SEO sollten Sie erwägen, Hintergrundbilder durch IMG-Tags zu ersetzen und die CSS-Eigenschaft „Object-Fit“ zu verwenden.

Das obige ist der detaillierte Inhalt vonWarum führen meine CSS-Übergänge dazu, dass Bilder in Chrome unscharf werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!