Jerky CSS3 Übergang in Firefox

Question

Ich versuche, ein einfaches Bild Fade auf Rollover zu machen - funktioniert gut und glatt in Chrome, aber Firefox ist ein bisschen nervös. Ich habe versucht, den backface-visibility Trick auf den Container zu tun, aber immer noch kein Glück.

Wer hat irgendwelche Ideen?

JSFiddle

HTML

<div class="link-box large"> 
    <div class="image"> 

     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRStwH3maKRqLU8lLOo1XbO6uZIKHRyf2PGv66H6ol5mB0kS_0r" alt=""> 
    </div> 
</div> 

CSS

.link-box .image img { transition: all .2s ease-out; width:200px; } 
.link-box.large { position: relative;} 
.link-box.large:hover .image img { opacity: .65; } 

Answer 1

Meine beste Vermutung ist, dass die Breite des Bildes 200px Einstellung und Verlassen der Höhe nicht näher bezeichnet wird, wodurch der Browser die berechnen Höhe des Bildes. Wenn die Höhe zu einer schönen ganzen Zahl berechnet wird, ist das kein Problem. Wenn die Höhe zu einer Dezimalzahl berechnet wird, kann dies die Ursache des Problems sein.

In diesem Fall sind die natürlichen Abmessungen des Bildes 275px um 183px.

Wenn Sie die Breite des Bildes auf 200px ändern, verkleinern Sie das Bild auf 72,727272 ...% seiner natürlichen Größe.

275/200 = 0,727272 ... Oder wenn Sie bevorzugen Fraktionen: 275 (8/11) = 200

nun die gleiche Gleichung auf der Höhe Ausbeuten ausgeführt wird:

183 (8/11) = 133.090909 ...

Es sieht so aus, als würden die Teilpixel im Normalbetrieb abgeschnitten werden, aber während des Übergangs werden die Teilpixel nicht beschnitten, und das Bild wird leicht verzogen, um das zu zeigen Teilpixel innerhalb derselben Höhe.

unten Geerntete zu 133px:

nicht beschnitten und leicht verzogen:

---

Nun, da sie eine gute Hypothese auf, was das Problem verursacht, auf die Lösungen:

Sie können die Höhe des Bildes fest codieren:

Working Example

.link-box .image img { 
    transition: all .2s ease-out; 
    width:200px; 
    height: 133px; /* manually set the height */ 
} 

Oder wenn Sie lieber nicht schwer Code der Höhe, können Sie auch das Problem mit einem anti-alias hack beheben, nur einen Box-Schatten hinzufügen.

Working Example

.link-box.large:hover .image img { 
    opacity: .65; 
    box-shadow: 0 0 0 #000; /* add a non-visible box-shadow */ 
} 

Oder wenn Sie ein box-shadow der Verwendung besorgt über die Cross-Browser-Kompatibilität sind, können Sie auch eine transparente Grenze verwenden:

Working Example

.link-box .image img { 
    transition: all .2s ease-out; 
    width:200px; 
    border: 1px solid transparent; /* add transparent border */ 
} 

Answer 2

auf meinem Firefox gut funktioniert.

In jedem Fall können Sie versuchen, einige spezielle Attribute hinzuzufügen, die den Browser auf den Übergang vorbereiten und das Element mit möglicher Transformation tatsächlich rendern.

Ein solches Attribut ist transform: translate3d(0,0,0);

So:

.link-box .image img { 
    transition: all .2s ease-out; 
    width:200px; 
    transform: translate3d(0,0,0); 
} 
.link-box.large { position: relative;} 
.link-box.large:hover .image img { opacity: .65; }