透過PNGがｊQueryアニメーションでopacityを使うとIE8だけ黒く塗りつぶされて表示されてしまいます。対策として、pngFixを施したりDD_belatedPNGやjQuery.belatedPNGをやってみたのですがだめでした。（IE6と7は対象外なので考えておりません。）黒く塗りつぶされてしまうpng画像は、主にテキストをpng画像として保存したものです。今後のIE対策としてもクリアしておきたいところなので、ご教授して頂ければ幸いです。よろしくお願い致します。
そもそもopacityってIEブラウザ対応していないんじゃない？クロスブラウザ用のjs入れたら解決しないかな。
IE専用のopacityプロパティで対応することができるようですよ。
IE8は、opacityでなく、alphaImageLoaderで対応。
もしくは、下記プラグイン。ただし、少しバグがあるので対策しながら使用を。
あ、使ってるのか。失礼。
this.style.removeAttribute("filter");あたりで解決しないかな？
VMLは？
ありがとうございます。VMLは記述の仕方がわからないのでできませんでした。
似たような人がいました。
ありがとうございます。この方法試しました。一部の画像はこれで黒つぶれしなくなったのですが、もう一部の画像は改善されませんでした。
治るものと治らないものがあるんですね。それは画像形式の差ですか？それとも他の要因？人事ではないので、詳しく聞きたい。
フェードインとフェードアウトだけでしたら、これで解決できました。画像形式の差はないと思います。詳しくは、このトピの別の投稿に書きますね。
background-color つけると治るんだけど、わざわざ透過PNG使ってる時にbackground-colorなんて付けられない事のほうが多いんだよね・・・。
background-color:transparent;は、jQueryアニメーションでopacity：0とかにしない場合は、有効かもしれないですね。
aaa.pngを透過させたい場合、<div id="item"><img src="aaa.png"></div>というhtmlに対して$(function() { $("#item").fixPng();});というスクリプトを書くということですよね？
すいません、書き込むところを間違えました。失礼しました。
もしかしてbelatedPNGの対象が画像自体じゃなくて親要素にしてる？それじゃ効かないよ
$("#item img").fixPng(); じゃないとダメです
ありがとうございます。試してみたところ、pngの透過部分がうっすら黒くなってしまいました。場合によっては、使わない方がいいときもあるようですね。
これどうやっても無理だと思う。何回もチャレンジしたけど全然だめ。このサイトは技術的に有名な人が作ったみたいだけどIEで見ると透過PNGはフェードしないで切り替わってる。たぶんIEで透過フェードはあきらめたんだろう。
IEのみ別の動作にした方が手っ取り早そうですからね。
VMLとか頑張ってやってみたけど、かなり汚いので結局使い物にならなかった記憶がある。結局IE8以下は透過PNGはフェードさせないで切り替えるのがベスト、という結論に今のところしている。IE8以下でフェードしないと文句言われたことがない。むしろ頑張って透過フェードを対応して重くなるほうが問題。
css3pie使ってみたんですけど、動作が重くなったので止めましたね。
皆様、アドバイスありがとうございます。今回、jQueryのアニメーションで透過PNGをopacityプロパティを使うと黒く塗りつぶされてしまう件に関しまして下記の方法で解決致しました。基本的に、フェードインとフェードアウトはpngFIXで解決できました。ですが、アニメーションで2回処理をする場合、これだけだと黒く塗りつぶされてしまいます。なので、2回目の処理をif($.browser.msie){IEの場合の処理}else{IE以外の場合の処理}で解決することにしました。具体的には、2回目のアニメーションでopacity：0にした後、opacity:1にしないで、opactiy：0のままにしておくというものです。IE以外の場合、消えたままなのですが、IEの場合は、表示されるようになりました。しかも、黒つぶれしない状態で。上記の方法で、今回のIE対策をすることができたので報告致します。
報告ありがとうございます。参考にさせていただきます。
みんなの回答 10 件
そもそもopacityってIEブラウザ対応していないんじゃない？
クロスブラウザ用のjs入れたら解決しないかな。
IE8は、opacityでなく、alphaImageLoaderで対応。
もしくは、下記プラグイン。
ただし、少しバグがあるので対策しながら使用を。
jQuery.belatedPNGをアップデートしました。 | プログラマ気分
http://wakuworks.jugem.jp/?eid=156this.style.removeAttribute("filter");
あたりで解決しないかな？
VMLは？
似たような人がいました。
ie8でもやっぱりpngfix - markup おぼえがき
http://ongak.com/markup/2011/11/ie8pngfix.htmlbackground-color つけると治るんだけど、わざわざ透過PNG使ってる時にbackground-colorなんて付けられない事のほうが多いんだよね・・・。
もしかしてbelatedPNGの対象が画像自体じゃなくて親要素にしてる？それじゃ効かないよ
これどうやっても無理だと思う。何回もチャレンジしたけど全然だめ。このサイトは技術的に有名な人が作ったみたいだけどIEで見ると透過PNGはフェードしないで切り替わってる。たぶんIEで透過フェードはあきらめたんだろう。
アマナグループ｜amanagroup INDEX
http://amana.jp/VMLとか頑張ってやってみたけど、かなり汚いので結局使い物にならなかった記憶がある。結局IE8以下は透過PNGはフェードさせないで切り替えるのがベスト、という結論に今のところしている。IE8以下でフェードしないと文句言われたことがない。むしろ頑張って透過フェードを対応して重くなるほうが問題。
皆様、アドバイスありがとうございます。今回、jQueryのアニメーションで透過PNGをopacityプロパティを使うと黒く塗りつぶされてしまう件に関しまして下記の方法で解決致しました。
基本的に、フェードインとフェードアウトはpngFIXで解決できました。ですが、アニメーションで2回処理をする場合、これだけだと黒く塗りつぶされてしまいます。なので、2回目の処理をif($.browser.msie){IEの場合の処理}else{IE以外の場合の処理}で解決することにしました。具体的には、2回目のアニメーションでopacity：0にした後、opacity:1にしないで、opactiy：0のままにしておくというものです。IE以外の場合、消えたままなのですが、IEの場合は、表示されるようになりました。しかも、黒つぶれしない状態で。上記の方法で、今回のIE対策をすることができたので報告致します。
関連するトピックス