Firefox変換スケール画像バグ。ホバー変換の切り替えを使用すると、イメージが小さなバージョンで点滅する

Question

1つのバグを修正しようとしている間に、別のバージョンに出くわしました。私は、ズーム効果のためにホバリング時に画像をわずかに拡大縮小しようとしています。

私は、transform：scale/scale3dを使用した後、画像のシフト/ウィグリングをするFirefoxで問題を抱えていました。私は半分のピクセルで何かをすると思います。私はこの問題が以前に議論されているのを見た。 hereとhereですが、どこでも言及されたソリューションのどれも私のために働いていませんでした。最終的には、スケール比や画像ファイルの実際のサイズのいずれかを調整することで「修正」することができました。

しかし、Firefox上で見知らぬバグが起き始めました（v.45.0.1）。最初にマウスを置いたときに画像が小さなバージョンで点滅します。これは一度だけ発生しますが、通常のページリフレッシュを実行することで再作成できます。他の変換やスケールで起こります。 rotate（）。バグレポート&がFirefoxを修正するのを待つ以外に、これについて何かできることはありますか？そして誰かがこれに気付いた/それは古いFirefoxで起こるのでしょうか？誰もが素晴らしいだろう画像ウィグル問題、:)

のためのより良い修正を持っている場合

はまた、私はウィグル問題のCodepen example hereしようと別の修正を設定しているが、Firefoxのバグは、現在見ることができますすべてのアイコンで

.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>

乾杯:)

Answer 1

私は以下のものを追加することでこれを解決しました。これは、FF v45.0.1バグを修正しました。このバグは、ホバー上で小さな画像を表示してくれました。

ここで固定

img { 
image-rendering: optimizeQuality; 
}