無職です。はたらいてます。 旧ブログ: 1 Entry per Day

-webkit-overflow-scrollingはスタックコンテキストを生成するのでz-indexに影響する

スマホで慣性スクロールを良い感じにするために -webkit-overflow-scrolling: touch; を指定することがあります。 しかし、このプロパティは非標準であり、iOS Safariでだけ有効なものです。そのためiOS Safariだけ挙動が違ってびっくりします。

developer.mozilla.org

さらに、-webkit-overflow-scrolling: touch; はスタックコンテキストを生成するので、z-indexに影響します。 z-index・スタックコンテキストについては↓のz-index本が詳しいです。

masahiko.booth.pm

この問題に遭った時の解決方法は次の3種類くらいかなと思っています。

  1. -webkit-overflow-scrolling を使うのをやめる
  2. 当該箇所のマークアップを変更
  3. (影響があるのが特定タイミングだけなら)-webkit-overflow-scrollingをunsetするjsを書く