【jQuery】IE8以下で透過PNGのopacityアニメーションが黒く汚れるのを回避する
そうめんと水出しのお茶があれば生きていける気がしてきたhakoishiです。
さて、今回はjQueryで透過PNGのopacityアニメーションがバグるのを回避する方法です。
透過画像をアニメーションさせた時、IE8以下でフチが黒くなって困った経験をお持ちの方、いらっしゃるのではないでしょうか？
発現条件
発現する条件は、この4点です。
- 画像は透過png。
- 画像自体にopacityアニメーションを設定している。
- 画像にフィルター（AlphaImageLoader）をかけている。
- ブラウザはIE8以下。
回避するためのポイント
回避するためのポイントはこの2点。
- 画像にフィルター(AlphaImageLoader)をかける。
- アニメーションの対象を、その画像を包括する要素にする。
移動やサイズ変更もしたい場合、包括要素も画像と同じサイズにしておくと扱い易いと思います。
サンプルを作りましたので、こちらをどうぞ。
サンプル
実機やIETesterなどでご覧ください。開発者ツールでは発現しませんので。
挙動とまとめ
jQueryでopacityのアニメーションをする際、IEにはfilter:opacityを使用しているらしく。
しかし、ブラウザの仕様上、フィルターの複数掛けはできないようで。
結果、一つの要素にフィルターとopacityアニメーションの両方を設定すると、片方が無効になってしまう、ということのようです。
サンプルファイルの下部に【参考】として、CSSでフィルターを重ねがけたサンプルを入れています。
IE8で見ると【NG】のアニメーション後と同じく、フチに黒が出た状態になっています。
フィルターが1つしか有効になっていないわけですね。
（※IE7で見るとベタの黒まで出てくるので、もっと複雑な事情がある気もします。）
AlphaImageLoader、opacityの順にかけているのでopacityが有効になっているのですが、
これをopacity、AlphaImageLoaderの順にかけた場合、AlphaImageLoaderの方が有効になります。
これを踏まえると、jQueryのバグというより、CSSの仕様という方が近いのかもしれません。
