No More IE6 Background Flicker

css

http://ajaxian.com/archives/no-more-ie6-background-flicker

a:hoverでbackground-positionを使ってロールオーバー効果を、という手法はおなじみ。

┌────────────┐
│　　　通常時の画像　　　│
├────────────┤
│ ロールオーバー時の画像 │
└────────────┘

↑こういう画像を用意しておいて（幅100px、高さは合計40pxとする）、

a#hoge { display:block; width:100px; height:40px; background:url('img.gif') no-repeat; }
a#hoge:hover { background-position:0 -20px; }

こういうやつ。ところが、IE6で表示するとロールオーバー時に画像を毎回読みにいくような挙動をし、画像がちらつく現象が発生したりします。

どう考えてもIEのバグなんだけど、ほとんど情報もなく長い間頭を痛めてきました。ようやく解決方法が判明した（はず）のでポスト。

この現象、一応「IE6 Background Flicker」と呼ばれているようですが、あまり有名ではないのかググってもあまりヒットしません。他にも呼び方があるのかな。

解決方法としては、CSSで

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

と記述するか、JavaScriptで

try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(e) {}

てな感じでIEのキャッシュを制御することで回避できるようです。JavaScriptでは上記の例を、ブラウザ判別してIEの時のみ適用するというアプローチも紹介されています。IE以外では関係のない指定なので、JavaScriptで振り分けをしてやるのがベストでしょうか。

リンク元を流し読みした感じだと、IE6.0SP1で追加された属性を利用しているのでしょうか。SP1を適用していない状態では恐らく回避できないと思われますが、SP2もリリースされて久しいことだし、古いブラウザはちらついても仕方ないかな。また、IE7ではこのバグ自体がfixされているらしく、回避策も不要なようです。

実際にはまだ試してないんだけど、明日やってみよう。

# 追記
# JavaScriptの方、テキスト間違えてたので修正。
# 実際にやってみた感じ、ちゃんと動いてるっぽいです。