【Firefox】画像をfadeすると、画像の大きさが変になる

Tweet

Pocket

jQueryのfadeを行うと、Firefoxで画像の大きさが変になることがあります。
マウスオーバーのときになるみたいで変にガタガタします。
CSSだけで直るので、サクッと修正しちゃいましょう。

修正方法

fadeさせる画像にbox-shadowを指定します。

img {
    box-shadow: #000 0 0 0;
}

参照：JQuery fadeIn fadeOut image difference 1px in FireFox – Stack Overflow

IE7以下に対応する

CSSで直す場合、そのまま使うとIE7以下ではfadeが効かない不具合があるので、CSSハックで対応します。

img, x:-moz-any-link, x:default {
    box-shadow: #000 0 0 0;
}