-webkit-overflow-scrollingはスタックコンテキストを生成するのでz-indexに影響する
-webkit-overflow-scrollingはiOS Safariで有効で、しかもスタックコンテキストを生成する。そのため、他のブラウザと要素の重なりが全然異なってしまっているという不具合だった。
— りんご🍏ガチアサリをXにした (@mstssk) 2019年3月1日
z-index本にもこれは書いてなかった(非標準プロパティだしな!)
スマホで慣性スクロールを良い感じにするために -webkit-overflow-scrolling: touch;
を指定することがあります。
しかし、このプロパティは非標準であり、iOS Safariでだけ有効なものです。そのためiOS Safariだけ挙動が違ってびっくりします。
さらに、-webkit-overflow-scrolling: touch;
はスタックコンテキストを生成するので、z-indexに影響します。
z-index・スタックコンテキストについては↓のz-index本が詳しいです。
この問題に遭った時の解決方法は次の3種類くらいかなと思っています。