Safari14でz-indexが負の値の重ね合わせコンテキスト内のスクロール要素がスクロールができない

公開:2020/09/23
更新:2020/09/24
2 min読了の目安(約1200字TECH技術記事

Safari 14 スクロールバーがマウスでスクロールできない現象に出会った。
どうやら z-index が負の値を指定されている重ね合わせコンテキスト内では、スクロールができなくなるようだ。
試してみたところ Chrome 86でもスクロールできなかった。

動作確認用
https://glitch.com/~negative-z-index-in-stacking-context-test

コード確認用
https://glitch.com/edit/#!/negative-z-index-in-stacking-context-test

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

参考文献