2016年2月23日火曜日

firefox position absoluteの不具合?

firefoxを使っています。
position:absolute の設定が期待通りに動きません。

<div class="a"></div>
<div class="b"></div>

ここで、bに、position:absoluteを設定し、表示上は、aに重なるようにしました。
通常は、これは期待通りに表示されます。

問題は、javascriptで、bの表示(display設定)をon、offした場合に発生します。
aが大きくなり、スクロールが表示される状態になったとき、bが表示される、横方向の位置が定まりません。
横スクロールの状態により、異なる場所に表示されます。

初期状態では、期待通りの場所に表示されますが、aの内部をスクロールさせると、bの表示位置が、それに影響を受けてしまいます。スクロールしても、bが動くことはありませんが、表示した時の位置が、期待とは、ずれた場所になってしまいます。
これは、横方向だけで、縦方向は問題ありません。

chromeやopera、edgeでは、発生しません。

対策として、position:fixedを指定すれば解決します。
表示の意図としては、この設定の方が合っているのですが、position:fixedは、他のブラウザや端末で問題を起こしがちのため、できるだけ使いたくはありません。
とりあえず、javascriptで、firefoxの場合のみ、position:fixedになるようにして解決しました。

0 件のコメント:

コメントを投稿