症状

Safariで横方向のスクロールをさせるために、overflow-xを指定したが、
Chromeなど他のブラウザでは問題ない. しかし、MobileのChromeはsafariと同様スクロールできない.

対策

z-indexを指定. (根本解決ではない)

解析方法

① 最小環境で確認 : OK

新規にシンプルなページを用意してスクロールできることを確認.
やはりページ依存. 他のページでも横スクロール出てきるところはあったので、やはり問題のページに課題がある.

② 挿入位置を変えていって、どこでおかしくなるか

現在挿入されている箇所から次第に上位のタグへ移動し続けた.
body直下では問題なかったが、z-indexを指定しないと見えず偶然z-indexを大きくしたところ、
下の階層に戻しても問題がなくなった. (つまり偶然原因が判明)

原因

• なぜz-indexで治ったか.

左上のハンバーガーボタンの内部で全画面に広がる通常見えないoverlay部品のせい?
これを削除すると、z-indexの指定なしにスクロールできるようになる.

他のページでうまくいっていたのは、上位のタグでz-indexが指定されているからの様子.

どうもz-indexがそれより低いor未設定の場合は、overlayの部品がscroll情報を奪い取ってしまい、他のクリックや他は動いてもこれだけは動かない.

削除前	削除後

• なぜmobileとsafariだけおかしいか

これはググったところ、ChromeはPCではblinkをMobileではwebkitを用いていることによる差異の様子. なのでwebkitのレンダリングに問題があり、それで治っている.

• webkit-overflow-scrolling : touch は必要か

これは既に不要と聞く. 実際使っても私の場合は何も改善しなかった.