とあるWeb製作者のブログ
2007年05月22日
FireFoxでposition:fixedを使用して以下のような形で背景レイヤーを引いたりすると
<html> <head> <style type="text/css">#back {
width:100%;
height:100%;
position: fixed;
z-index:0;
top:0px;
left:0px;
background-color:#111;
}#front {
width:50%;
height:50%;
position: absolute;
z-index:10;
top:0px;
left:0px;
background-color:#999;
}</style>
</head>
<body>
<div id="back"></div>
<div id="front">
Front <input size="30">
</div>
</body>
</html>
なんとテキストフィールドにカーソルが表示されなくなってしまいます…。
カーソルが表示されなくなるだけで入力は可能です。
なんだか気持ち悪いですが…。バグでしょうか？
ちなみにNetScape7.1でも同現象を確認しました。
あとホイールスクロールが効かなくなるという現象も確認されました。
マウスポインタが#front上にあるとスクロールできますが、#back上にあるとスクロールが効かなくなります。
これも気持ち悪い現象ですね。
こちらのエントリーも関係あるかも知れません。
cloned.log Firefoxでz-indexを使うとフォームのカーソルが描画されなくなる問題
http://d.hatena.ne.jp/cloned/20061127
どうしてもFixedを使用する必要がある場合は一考の必要あり。
