Warum verschwimmt oder verschiebt sich mein CSS-Übergangsbild in Chrome um 1 Pixel?

Chrome-CSS-Übergang verwischt das Bild oder verschiebt 1 Pixel

Bei der Verwendung von CSS-Übergängen zum Verschieben eines Divs tritt häufig ein Problem auf: das Bild innerhalb des Div wird unscharf oder verschiebt sich leicht. Dieses eigenartige Verhalten tritt nur auf, wenn der Übergang eine Übersetzung beinhaltet und wenn die Seite Bildlaufleisten enthält.

Um dieses Problem zu beheben, können Sie die folgenden CSS-Eigenschaften für das betroffene Div implementieren:

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

By Auf diese Weise lassen Sie die Unterteilung effektiver „2D“ erscheinen. Hier ist eine Erklärung des Zwecks jeder Eigenschaft:

• -webkit-backface-visibility: versteckt: Diese Eigenschaft verbirgt die Rückseite der Unterteilung, die normalerweise standardmäßig gezeichnet wird, um das Umdrehen zu ermöglichen und Rotationseffekte. Da Sie nur einfache Übersetzungen durchführen, wird durch das Ausblenden der Rückseite unnötiges Rendern vermieden.
• -webkit-transform: TranslateZ(0) Scale(1, 1): Diese Eigenschaft weist die Z- Achsenverschiebung auf Null, wodurch die Unterteilung im 3D-Raum effektiv abgeflacht wird. Chrome verarbeitet diese Eigenschaft nativ, sie ist jedoch aus Kompatibilitätsgründen mit älteren Chromium-Versionen im Präfix -webkit- enthalten.

Das obige ist der detaillierte Inhalt vonWarum verschwimmt oder verschiebt sich mein CSS-Übergangsbild in Chrome um 1 Pixel?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!