リロード、スクロールで線・画像が消える。通称「いないいないばあバグ」

IE6のバグで通称「いないいないばあバグ」というものがあります。日本語訳しない状態では「peek-a-boo bug」。
リロードしたり、スクロールしたりすると、CSSで指定したborderやbackgrund-imageが出たり消えたりする、というバグです。
というか、基本状態で表示されていなくて、リロード、スクロールで出たり消えたりする、のほうが正しいんでしょうか。よくわかりません。

誰が命名したのかわかりませんが、「いないいないばあバグ」とはナイスネーミングだと思います。


いないいないばあバグの対処法としては、

  1. 問題の出る要素を囲っている div に line-height を指定する。
  2. 問題の出る要素に width または height を指定する。
  3. 問題の出る要素の中の要素に position:relative を指定する。

の3つの方法があるようです。他にもあるかもしれませんが、とりあえず3つで。

私は主に2番目で解決しています。
つまり、問題の出る要素に height: 1%; と指定してしまうわけです。
IEでは、要素に高さが指定してあっても、中身に合わせて自動で合わせてくれるという仕様(これもバグなんでしょうか?)があるので、それを利用します。

そして、このバグはIE6のバグですので、手っ取り早くアンダースコアハックで解消します。
floatを使っている要素の親要素に _height: 1%; と指定します。
これで解決しました

7 件のコメント

  • はじめまして。「MT」「画像が消える」で検索してここにやって来ました。
    実は私のブログサイトも一週間ほど前からスクロールすると画像が出たり消えたりするようになり、画面全体も乱れるようになりました。
    ここで言っている「いないいないばあバグ」と同じものなのでしょうか?


  • すみません、書き漏らしましたがIE6とIE7で発症します。
    これまでなんともなかったのが、ある日を境にという点で、
    このバグとは原因が違うのかもしれませんが、
    似たようなことを書いてあったものですから…

  • コメントありがとうございます。
    サイトのほう確認してみました。結論から言ってしまうとこれは「いないいないばあバグ」ではありませんね。
    サイトを開いてしばらく放っておくと画像が表示されました。
    つまり、画像読み込みに時間がかかっているのだと思います。

    サイトでは時間によって背景が変わるようにしているようですが、その読み込みが重いせいだと思います。
    特に背景画像が切り替わるタイミングでアクセスしたりリロードしたりすると重いですね。

    対処法としては、
    ・テンプレートを変更する
    ・背景画像の切り替わるタイミングを減らす(例えば30分/毎から1時間/毎へ)
    ・背景画像の解像度を落とし、画像を軽くする
    などです。

    が。
    あくまで「たぶん」で「おそらく」で「きっと」です。
    あんまり信用できんコメントでお役に立てるかどうかわかりません。申し訳ないです。

  • 検証ありがとうございます
    背景画像はJavaScriptを使って「リロードする度」に切り替えています
    スクロール中に画像が消えたり出たりするのは、背景だけではなく「すべて」で
    JavaScriptを無効にして背景を非表示にしても症状は同じです
    また、日付別やカテゴリ別のページではこの現象は現れません
    スクロールを繰り返しているうちにブラウザの表示が崩れたり
    ひどいときにはデスクトップ全体も乱れましたが
    ここ1、2日は収まりました…って、日によって症状が違うというのが困りモノです

    いずれにしましても「いないいないばぁバグ」とは無関係のようですので
    引き続き原因を考えてみます
    ありがとうございました

  • 『要素を包んでいる親タグ自体に背景色指定』は知らなかったです。今度試してみますかな…。
    ありがとうございます。

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA