Chrome-Browser-Bug bei CSS-animierten Bilder

In diesem Beitrag möchte ich auf einen Bug in aktuellen Chrome-Browsern (letzte gestestete Version: 44) hinweisen.

Der Fehler tritt bei Responsive-Layouts, in denen Bilder mit einer variablen Breite von 100% eingebunden sind, auf. Legt man auf die Bilder einen Hover-Effekt, dessen Übergang per CSS mit transition realisiert wird, um z.B. die Eigenschaft opacity zu animieren, kann es dazu kommen, dass das Bild beim Drüberfahren mit der Maus um 1 oder 2 Pixel in der Breite ungewollt vergrößert wird.

Das Problem lässt sich mit einer einzigen Zeile CSS-Code lösen. Dieser Hack ist eigentlich unter dem Namen null transform hack bekannt und dient dazu die Grafikprozessor-Beschleunigung zu aktivieren. In diesem Fall hilft das zur Behebung des Bugs, es ist aber anzumerken, dass die Hardware-Beschleunigung aus Performance-Gründen nicht “infaltionär” eingesetzt werden sollte.

.some-container img {
	-webkit-transform: translateZ(0);
}


Kommentar hinterlassen

Ihre eMail-Adresse wird nicht veröffentlicht.

Sie können folgende HTML-Tags und -Attribute verwenden: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>