IEでfilterのopacityを利用した際の画像の抜け | [旧] WEB向上中

[旧] WEB向上中

webデザイナーとして日々奮闘する中、色々と忘れず頑張っていければと、web周りの技術や情報をメモっています。

jQueryで、fadeToを使って楽々透明アニメーションが出来たーと喜んでみたが、よく見るとIEだと、画像に変な抜けが発生・・・。

むむむっと調べてみると、どうやらfilter:alpha(opacity)「#02050a」の色のみ白抜けするようで・・・しかもjpegの時のみ。( ̄Д ̄;;

jQueryのfadeToは、IEに対してはこの指定をぶち込むので、これが原因と判明。
取りあえず原因さえ分かれば対処は簡単と画像を触ろうとした時に気づきました。

黒が広範囲にわたって使用されている部分の一部が上記色に該当していたのですが、元画像では白抜けする部分がその色というわけではなかったのです。
つまりjpeg圧縮する際に出来上がった色なので、元画像でその部分だけコントロールしようとしてもうまくいかず。。
結局黒部分全体の色を若干明るくする事で解消はしました。

ですが、非常にうっとうしいこのバグ。IE8でも発生していたので、常に頭においておいた方が良さそうです。