Firefoxで画像をフェードさせるとズレる

2014/11/25 更新
Firefoxで画像をフェードさせると、1pxほどズレる現象を解決する方法。

Firefoxで、リンク画像をフェード(fade)させると1pxほど左右にズレてしまう現象に困っていましたが、解決策があったのでメモしておきます。

Firefoxは以前のバージョンからフェードさせた画像がズレて見えるという現象がありました。ウィンドウのサイズによっては起こらないことから、ウィンドウサイズの兼ね合いでレンダリングされた画像位置が小数点だった場合に起こると推測されます。 ずっと気にはなっていたのですが、某案件で解決する必要があり調べてみたところ、mania-kuさんで紹介されていましたのでそれを元に検証してみました。 a:hoverで画像をフェードさせるためのCSSは以下の通りです。

CSS

a img {
-webkit-transition: opacity 0.2s ease-out;
-moz-transition: opacity 0.2s ease-out;
transition: opacity 0.2s ease-out;
}
a:hover img {
-webkit-opacity: .7;
-moz-opacity: .7;
opacity: .7;
}
今回、Firefoxでの不具合を修正するために加えたCSS。 
a img {
box-shadow: #000 0 0 0;
}
動作検証はWindows／MacのFirefox 33で行ない、意図通りに解消していることを確認しました。

おすすめ記事