Zur Machart Studios Website
Back to top

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.

Hier kann man den Unterschied beobachten. Das obere Bild benutzt keinen der CSS-Workarounds, beim Hover ist eine Veränderung in der Größe klar zu erkennen. Das untere Bild nutzt beide Workarounds und bleibt beim Hover immer gleich.

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.

Ein Kommentar

  1. 2. September 2013 Hanna Antworten

    Wow das ist mir bisher wirklich nicht aufgefallen. Ich habe immer gedacht, dass es am Kontrast von schwarz-weiß liegt. (in etwa der Effekt, dass Weiß größer scheint und darum sich das Bild optisch „verschiebt“)

    Ich saß eben 10 Minuten vor den ersten Bildern und habe mir den „wiggle“ angesehn ^^
    Gott sei Dank hat mich niemand Anderes gesehn ;D

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Machart Studios Werbeagentur