Firefoxでz-indexを使うとフォームのカーソルが描画されなくなる問題

<html>
<head>
<style type="text/css">
#back {
position: absolute;
top: 20;
left: 20;
width: 500px;
height: 500px;
overflow: auto;
z-index: 50;
}
#front {
position: absolute;
top: 20;
left: 20;
z-index: 100;
}
</style>
</head>
<body>
<div id="back"></div>
<div id="front">
<input type="text" value="Hello">
</div>
</body>
</html>

z-indexを使うときの問題。上のHTMLコードをFirefoxで見る（再現HTMLはこちらで）とわかるけれど、テキストフィールドのカーソルが描画されない。テキストエリアでも同じ現象が発生する。これが不具合なのか仕様なのかはわからないけれど、気持ち悪いので直したい。
原因になっているのが、#backの「overflow: auto」っぽい。これを削除すると元に戻る。ただ、スクロールバーが必要なエリアの上に何か表示したいこともあるだろうから、それでは解決にならない。
結果的に#frontにも「overflow: auto」を追加した。「overflow: visible」では直らなかったので、カーソルの描画は正常になったものの、スクロールバーを表示したくないときには工夫が必要そう。
※環境はWindowsXP Firefox2.0、FedoraCore6 Firefox1.5.0.8

コメントする