リロード、スクロールで線・画像が消える。通称「いないいないばあバグ」
IE6のバグで通称「いないいないばあバグ」というものがあります。日本語訳しない状態で「peek-a-boo bug」。
リロードしたり、スクロールしたりすると、CSSで指定したborderやbackgrund-imageが出たり消えたりする、というバグです。
というか、基本状態で表示されていなくて、リロード、スクロールで出たり消えたりする、のほうが正しいんでしょうか。
「いないいないばあバグ」とは言いえて妙の、訳の分からんバグです。こういうの誰が命名したんでしょうね。
いないいないばあバグの対処法としては、
- 問題の出る要素を囲っている div に line-height を指定する。
- 問題の出る要素に width または height を指定する。
- 問題の出る要素の中の要素に position:relative を指定する。
の3つの方法があるようです。他にもあるかもしれませんが、とりあえず3つで。
私は主に2番目で解決しています。分かりやすいので。
まあ、つまり、問題の出る要素に height: 1%; と指定してしまうわけです。
IEでは、要素に高さが指定してあっても、中身に合わせて自動で合わせてくれるという、そーゆーいらんことに気ぃ使わんで他何とかせぇや的ココロヅカイがあるので、それを利用するわけです。
そして、このバグはIE6のバグですので、ハックで解消します。
IE以外は、高さ自動調節機能がないため、ハック使わないと他のブラウザが大変なことになってしまいます。
アンダースコアハックが一番手っ取り早いですな。
まあ、つまり、floatを使っている要素の親要素に _height: 1%; と指定してしまうわけです。
これで事件解決。
正直あんまりハック使いたくないんですが…他に解決方法があるなら誰か教えてくだされ。
はじめまして。「MT」「画像が消える」で検索してここにやって来ました。
実は私のブログサイトも一週間ほど前からスクロールすると画像が出たり消えたりするようになり、画面全体も乱れるようになりました。
ここで言っている「いないいないばあバグ」と同じものなのでしょうか？
↑
すみません、書き漏らしましたがＩＥ6とＩＥ7で発症します。
これまでなんともなかったのが、ある日を境にという点で、
このバグとは原因が違うのかもしれませんが、
似たようなことを書いてあったものですから…
コメントありがとうございます。
サイトのほう確認してみました。結論から言ってしまうとこれは「いないいないばあバグ」ではありませんね。
サイトを開いてしばらく放っておくと画像が表示されました。
つまり、画像読み込みに時間がかかっているのだと思います。
サイトでは時間によって背景が変わるようにしているようですが、その読み込みが重いせいだと思います。
特に背景画像が切り替わるタイミングでアクセスしたりリロードしたりすると重いですね。
対処法としては、
・テンプレートを変更する
・背景画像の切り替わるタイミングを減らす（例えば30分／毎から1時間／毎へ）
・背景画像の解像度を落とし、画像を軽くする
などです。
が。
あくまで「たぶん」で「おそらく」で「きっと」です。
あんまり信用できんコメントでお役に立てるかどうかわかりません。申し訳ないです。
検証ありがとうございます
背景画像はJavaScriptを使って「リロードする度」に切り替えています
スクロール中に画像が消えたり出たりするのは、背景だけではなく「すべて」で
JavaScriptを無効にして背景を非表示にしても症状は同じです
また、日付別やカテゴリ別のページではこの現象は現れません
スクロールを繰り返しているうちにブラウザの表示が崩れたり
ひどいときにはデスクトップ全体も乱れましたが
ここ1、2日は収まりました…って、日によって症状が違うというのが困りモノです
いずれにしましても「いないいないばぁバグ」とは無関係のようですので
引き続き原因を考えてみます
ありがとうございました
お役に立てず申し訳ないです。
原因が解明するように隅っこのほうで祈っております。
がんばってください。
http://webnooboegaki.blog33.fc2.com/blog-entry-29.html
これで解決じゃないですかｗ？
『要素を包んでいる親タグ自体に背景色指定』は知らなかったです。今度試してみますかな…。
ありがとうございます。