タグ

2014年11月20日のブックマーク (1件)

  • iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita

    ブラウザの表示領域に対して要素の位置を固定してくれるposition: fixed;は、表示領域が限られるスマートフォンでこそ使いどころがたくさんあるのだが、(特にAndroidで)バグが多くて実用にはまだまだ慎重にならざるを得ない。 今回は、iOSで遭遇したバグについて記述しておく。 症状 position: fixedを指定した要素がz-indexを無視する。 精確に説明すると、position: fixedを指定した要素が、表示領域外にある部分が、スクロールされて表示領域に入ってきたときに、スクロールされている間だけ、z-indexが無視されて、より大きなz-indexが指定されている(即ちより手前の)要素より前面に表示される。 実際のコードをご覧いただこう。 <div class="contents">ここに通常のコンテンツ</div> <div class="bg"></div>

    iOSでposition:fixedした要素がスクロール中だけz-indexを無視して前面に表示されてしまうバグ - Qiita
    hirorock
    hirorock 2014/11/20
    AndroidもiOSもtranslate3dで解決できるが問題もあるので気をつけて使う