Firefox transformieren Maßstab Bild Bug. Bild blinkt eine kleine Version von sich selbst bei der Verwendung von Hover-Transformation Übergang

Question

Beim Versuch, einen Fehler zu beheben Ich bin auf eine andere, ziemlich sicher, es war, als meine Version von Firefox heute aktualisiert. Ich versuche, ein Bild beim Schweben für einen Zoomeffekt leicht zu skalieren.

Ich hatte Probleme in Firefox mit dem Bild verschieben/wackeln nach der Verwendung von transform: scale/scale3d. Etwas mit Halbpixeln zu tun, nehme ich an. Ich habe gesehen, dass dieses Thema schon einmal diskutiert wurde - dh. here und here, aber keine der erwähnten Lösungen funktionierte für mich. Am Ende konnte ich es "reparieren", indem ich entweder das Maßstabsverhältnis oder die tatsächliche Größe der Bilddatei änderte.

Aber dann begann ein seltsamer Fehler in Firefox (V.45.0.1), wo das Bild eine kleine Version von sich selbst blinkt, wenn Sie den ersten Mauszeiger darüber bewegen. Dies geschieht nur einmal, kann aber durch eine normale Seitenaktualisierung erneut erstellt werden. Passiert mit anderen Transformationen sowie Maßstab, z. drehen(). Gibt es etwas, was ich über dieses andere tun kann als einen Fehlerbericht senden & warten auf Firefox zu beheben? Und hat es noch jemand bemerkt/passiert das in älteren Firefoxes?

Auch wenn jemand eine bessere Lösung für das Bild wackeln Problem hat, dass wäre erstaunlich :)

Ich habe ein Codepen example here versuchen verschiedene Fehlerbehebungen für das wackeln Problem, aber der Firefox Bug einrichten können zur Zeit zu sehen auf allen Symbolen.

.hoverPop { 
 
    -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1); 
 
    -webkit-transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1.75); 
 
    transition: all 0.5s cubic-bezier(0.42, 0, 0.42, 1.75); 
 
} 
 
.hoverPop:hover { 
 
    -webkit-transform: scale3d(1.2, 1.2, 1.2); 
 
    transform: scale3d(1.2, 1.2, 1.2); 
 
} 
 
img { 
 
    border: 0; 
 
    vertical-align: middle; 
 
    max-width: 100%; 
 
} 
 
.imgwrap { 
 
    width: 65px; 
 
    margin: 0 auto 12px auto; 
 
    height: 65px; 
 
}

<div class="imgwrap"> 
 
    <img class="hoverPop" src="http://i1175.photobucket.com/albums/r631/Bananafarma/testIcon_zpsfrhmw5qd.png" alt="test"> 
 
</div>

Prost :)

Answer 1

Ich löste dies durch folgende Zugabe. Dies behebt FF v45.0.1 Fehler, der das kleinere Bild bei Hover mit Übergang für mich angezeigt hat.

img { 
image-rendering: optimizeQuality; 
}