Firefox Rendering Bug

Ein Bug im Firefox verursacht bei Veränderung der opacity von Bildern durch :hover eine Verschiebung der Bildgröße. Mehr dazu und wie man mit dem Bug am Besten umgeht, steht in diesem Beitrag.

Bei der Website von einem unserer Kunden ist uns der Bug vor kurzem begegnet. Zwei Bilder bekommen beim hover eine opacity:0.9;. Im Firefox ändert sich dadurch die horizontale Darstellung um 1px. Diesen „wiggle“ sieht man leider sofort. Hier kann man das Ganze testen, einfach mit der Maus über die Bilder bewegen und die Größe beachten. Seltsamerweise taucht der Bug nicht mehr auf, wenn man raus- oder reinzoomt, nur bei gewissen Zoomstufen ist dieser vorhanden.

So fixt man den Firefox Rendering Bug

Als Workaround gibt es zwei Möglichkeiten, beide benötigen nur ein wenig CSS.

1. Den Bildern ein box-shadow:0 0 0 #000; geben.
2. Den Bildern in beiden Zuständen (:hover und normal) ein -moz-backface-visibility:hidden; geben.

Der erste Beitrag auf dem Bugzilla-Forum zu diesem Bug ist vom 15.04.2012. Nach einem Patch für Firefox 10, welcher ähnliche Probleme beim Rendering von Bildern beseitigen sollte, trat dieser Fehler auf. Bis heute gibt es keinen offiziellen Fix. Wir hoffen, dass wir euch ein wenig weiterhelfen konnten und sind weiterhin gespannt, ob Firefox das Problem zukünftig lösen wird. Und falls nicht, jetzt wisst ihr ja, wie es geht.

Von Jonathan Remmers

Als echter „Technik Checker“ wollte der Film- und Musikfan Jonathan schon immer „Selbermachen“. Mit 9 Jahren besuchte Jonathan den ersten Computerkurs. Seine frühe Begabung für Programmiersprachen und sein großes Interesse für Informatik haben nicht nur Papas Rechner lahm gelegt. Anstatt mit der Bastelschere, hantierte er mit Photoshop und entdeckte dabei seine kreative Ader. Seine Aufgaben bei Machart Studios werden die Konzeption, Gestaltung und Realisierung klassischer und neuer Medien sein.