😇
Safari14でz-indexが負の値の重ね合わせコンテキスト内のスクロール要素がスクロールができない
Safari 14 スクロールバーがマウスでスクロールできない現象に出会った。
どうやら z-index が負の値を指定されている重ね合わせコンテキスト内では、スクロールができなくなるようだ。
試してみたところ Chrome 86でもスクロールできなかった。
動作確認用
コード確認用
position の値が absolute または relative であり、かつ z-index の値が auto 以外の要素
重ね合わせコンテキスト - MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
とあるので position: relative を指定して確認した
.scrollbox {
overflow: hidden scroll;
height: 50px;
}
.negative-z-index {
z-index: -1;
position: relative;
}
.positive-z-index {
z-index: 1;
position: relative;
}
not scroll in Safari 14, Chrome 86
<div class="negative-z-index">
<div class="scrollbox">
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9
</div>
</div>
no problem
<div class="positive-z-index">
<div class="scrollbox">
0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9
</div>
</div>
＃雑感
動きをみる限り、bodyよりも後ろにある状態になるため、フォーカスが取れずに動作していないようにみえた。 thanks @shibe23, @og24715
Discussion