半透明のPNGをjQueryでfadeしたとき、IE7・IE8で問題

半透明の部分があるPNG画像にたいして、jQueryでfadeIn・fadeOutを行ったり、animateでopacityを設定すると、半透明部分がべた塗りで(濃く)見えてしまいます。
この現象はIE7・IE8で発生するようです。
(IE6は透過PNG未対応として検証対象外)

何通りかやり方を試してみましたが、元々半透明の部分がある場合、jQueryで透明度が変わるような処理を行うとどうしても問題が発生してしまうことが避けられませんでした。
完全に透明な部分と完全に不透明な部分は問題有りません。
結局これについてはデザイン側で妥協して、半透明の処理をやめました。

IEでも9以降では大丈夫ですし、今後は減ってくる問題でしょうが、今のところIE8はまだ切れない感じなので致し方ないですね。

コメント