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);
}