その名も「white noise」バグ
Prevent White Noise From Appearing in Images After Fading↑によると、
・jQueryなどのJavaScriptライブラリで、フェードイン・アウトなどを用いると発症。
・症状は、真っ黒画素(#000000)が背景色に置き換わる、つまり透過する。
らしい。
そこで考えた。背景を真っ黒にしてしまえ、と。
アニメーション中は元の背景のままで、アニメーション終了後に真っ黒に。
これで、アニメーション中はホワイトの伊豆、じゃなく、ホワイトノイズが見えるものの、
落ち着いた状態では見えなくなる。
これで妥協でしょう。。
jQueryコードの例(フェードアウト→画像切り替え→フェードイン):
target.nextSrc = "hoge.jpg";// 切り替える画像 // white noise @IE 対策(animate中は背景を元の色に) jQuery(target).parent().css('background-color', parentBgColorOrg); // 切り替えアニメーション開始 jQuery(target).animate({opacity: 0}, "slow", "easeInQuint", function(){ // 前の画像が消えたら切り替え(透明のまま) jQuery(this).bind('load', function(){ // 次の画像に切り替わったら表示 jQuery(this).unbind('load').animate({opacity: 100}, "slow", "easeInQuint", function(){ // white noise @IE 対策(animateが完了後は背景を真っ黒に) jQuery(this).parent().css('background-color', '#000'); }); }).attr('src', this.nextSrc); });
引用元にも書いてあるが、このバグ、
IE8でもまだ引きずってるよ。
090225 追記しました。続・IEの「White Noise」バグ
Comments