悪名高き IE6 がついに Yahoo さんからも干されてデベロッパー歓喜！となってから、それなりに時間が過ぎましたね。
あなたの会社では IE6 のサポート状況は如何なものでしょう？当社では Yahoo さんもこうしていますよ、せめて IE7 にしましょ？ね？ね？と言う地道な活動を続けて、それなりに効果が出ています。
実際 IE6 をサポートしなければ CSS がシンプルに書けたり、png のアルファチャンネルをプラグイン無しで描画出来…で、き…
出来てないじゃん！
と言う訳で今回は IE7 と IE8 で再現を確認したアルファチャンネルの描画バグをフィックスします、症状は下記のような感じ。
- 普通に img 要素で描画する分には問題無い
- 既に描画されている要素の opacity を弄るとアルファチャンネル部分が黒くなる
普通にサイトを作っていて、png ファイルの要素の opacity を弄るなんて事はまず無さそうですが、最近はスタイリッシュにファッファさせたくなるじゃないですか？マウスオーバーしたらメニューが、みたいな。
それをお手軽に使いたい時はなんと言っても jQuery の fadeIn / fadeOut ですよね、例えば fadeIn は要素の opacity を一旦 0 にしてから display:block 状態に、そこから opacity を 1 になるまで加算すると言う処理を勝手にやってくれます。
つまり opacity 弄っちゃってます、IE7 と IE8 はここにアルファチャンネルが含まれた png 画像が描画されていると残念な黒い何かが出てしまうと言う訳です。
M$さんは「png ファイルのアルファチャンネルに対応しました（笑）」って言ってたのにね。
それではサクッとフィックスしましょう、解決法は AlphaImageLoader を引き続き使う。これで良いと思います、IE 自慢の独自フィルターだし。そもそも IE しかこの症状出ないから、自己解決させるのが最上の手段でしょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(function() { if(navigator.userAgent.indexOf("MSIE") != -1) { $('img').each(function() { if($(this).attr('src').indexOf('.png') != -1) { $(this).css({ 'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + $(this).attr('src') + '", sizingMethod="scale");' }); } }); } }); |
ページの読み込みが完了したらブラウザ判定、どうやら IE だなとなれば html 上の img 要素全てを each して、src 属性に “.png” が含まれていたら AlphaImageLoader をかける。
これで IE7 と IE8 で思う存分ファッファ出来るようになる、IE6 は多分これだと駄目だと思うけど。
Yahoo さんの非推奨ブラウザなので今回は無視する方向で、Yahoo さんいつもスケープゴートになってくれてありがとう。
それではまた。
vividworks
この英語コメントって、スパムじゃないですか？？(^-^;
ところで、この function は、どこに記述すると使えるのでしょうか。
今、IE7 でまさにフェードイン・フェードアウトをしようとしているところでつまづいています。
こちらのスクリプトが解決になりそうなんですが、Wordpress でつかうのでしょうか。
> ponさん
英語はとんと暗くて、最近被っている内容のコメントが入り出して「あぁ、これはスパムだな」と気づいた所存です。
気が向いたら整理しないといけませんね笑
さて、ご質問ですが wordpress でも利用可能ですが特に縛りはありません。
html を IE7/8 で出力しているものであれば全てにおいて有効です、タイトルにある通り jquery を読み込んでいれば上手く動くと思います。
一応セオリーとしては head 要素内に書くのがベターです、若しくは common.js のように外部 js に書いて head 要素内で呼び出すと言うのも管理がしやすくて良いでしょう。
ちなみに私は基本的に外部に common.js を書く派です。
フィルタについて言及していませんが sizingMethod のパラメータはきちんと大きさを指定していない場合は意図しない画像サイズになる可能性があるので、scale より crop の方が良い結果を生む事もあると思います。
フィルタをかけたら画像の大きさがおかしな事になる…と言う場合は試してみてください。
[…] WEB業界の技術屋さん はヘッダー部分でイメージ全部呼び出ししてIEだったらcssに追加ってやってたんですが・・・7個くらいのpng画像でそれはもったいねーな。あと、最初非公開だとま […]
[…] 用している際、IE8以下にてフェード中やオンマウス時に 周りに黒いギザギザの縁が出てしまうのを回避するため「AlphaImageLoader」を使用。 こちらを参考にさせて頂きました。 コードは、 […]
こちらの記事を参考にさせてもらいました！
私もこの件で、何度かつまづきました（汗）
コレ以外に、タグの囲み方やcssの書き方で状況が改善されることもありました！
あとこちらで紹介された方法ですと、IE8等できちんとフェードインされますが、実は落とし穴があります。
IE8等のブラウザで表示の倍率を変えると、ずっと黒いなにかが表示されてしまうという、バグがあります（汗
これから対処法を探しますが、こちらを参考にしていたので、報告まで！
> ライズさん
報告ありがとうございます、WinXP + IE8で再現を確認しました。
少し実験しましたがIE7でも同様の現象が確認されたため、AlphaImageLoaderはブラウザの拡大に対応しているのかどうかを調べるのが良いかも知れませんね。
もしサポートされていないのであれば、この方法では対応不能となります、ブラウザの拡大機能を使わせないために「文字サイズ：大・中・小」的なものでお茶を濁すしか無いですね。
少し興味があるので、片手間にはなりますが私の方でも調べてみます。
上記のコード 非常に助かりました。
ありがとうございます。
> みやこさん
お役に立てたようで何よりです。
[…] なので今度はVIVID Labs.さんから知恵を拝借、IE用のフィルタ・AlphaImageLoaderを使用して回避する。 […]
[…] 過去のエントリー（[IE7|IE8] jQueryのfadeIn/fadeOutした時にpng画像が変になる時のTips：Web 業界の技術屋 | VIVID Labs.） […]