iPhone Safariでz-indexが効かず重なり順が正常に動かない場合の対処法

ハンバーガーメニューを作成していて、z-indexがiPhoneのSafariと厳密に言えばChromeで、Z-indexに振った数字順に重なりが表示されないバグがあり苦難だったので対処法を備忘録として残しておきます。

ちなみに、今回動かない記述のまま動いているhtmlとcssもあるので原因はよくわかりません。とりあえず動けばいいという感じで乗り切ったので、それを踏まえてどうぞ。

iPhone Safariでz-indexが効かない原因

z-indexのdivの入れ子状態から取り出す

z-indexの低い「大枠div」の中にz-indexの高いdivを入れると、大枠divよりも上には表示されません。

可能なら「大枠div」の外に「zindex999」を出してやれば最上面に出てきます。しかしデザイン上、ソース上、そうはいかないと思います。

「transform:translateZ(1px);」を追記

z-indexが効かないのはsafariのバグらしく、上面に表示したいdivに「transform:translateZ(1px);」を追記することでZ軸を1px上げて最上面に浮かばせるみたいです。

私はこれでは変化なしでした。

「-webkit-overflow-scrolling: touch;」を消す

スムーズなスクロールを可能にする「-webkit-overflow-scrolling: touch;」が最上面に表示したいdivよりも上に入っているとz-indexが効かないことを突き止め、「html」部分に記述していた「-webkit-overflow-scrolling: touch;」を削除するとz-indexが正常に動きました。

「overflow: auto;」も同時に記述していることが多いと思いますが、こちらも記述されているとz-indexが効かないので削除をお薦めします。

「-webkit-overflow-scrolling: touch;」を消してしまうとスムーズなスクロールができなくなってしまうので代わりに「scroll-behavior: smooth;」を記述したらスムーズなスクロールができ、同時にz-indexも正常に動作しました。

「-webkit-overflow-scrolling: touch;」があってもAndroidなら普通に動く

当初はAndroidでしか動作チェックをしていませんでしたが、「-webkit-overflow-scrolling: touch;」を記述していてもまったく問題なくz-indexは数字を振った順番で重なりを再現してくれていました。

iphoneのsafariとchromeだけは駄目で、ここに辿り着くまでにかなり時間を費やしてしまいました。

他のソースなら「-webkit-overflow-scrolling: touch;」があっても正常動作する

今回制作したものとは別のソースであれば「-webkit-overflow-scrolling: touch;」をCSSの「html」に記述していても普通にz-indexがiphoneのsafariで正常動作していました。

今回z-indexが効かなかった原因の根本はわかりませんが、今回に限っては「-webkit-overflow-scrolling: touch;」と「overflow: auto;」がCSSに記述されていることでz-indexが効かなくなっていたことは間違いないようで、とりあえずこれで問題はクリアになりました。