ノンカフェインであなたにやさしい

Ruby,Rails,HTML,CSS,Reactなど

iOS Safariでz-indexの親に -webkit-overflow-scrolling: touch; overflow: auto; が設定されているとz-indexが正しく効かないバグ

モーダルやチュートリアルなどを実装していてiOS Safariだけ z-index が正しく効いていない状況があった。

簡単なサンプル codepen.io

z-index の大きい要素の親に以下が設定されていると z-index が前面に来てくれないよう。

-webkit-overflow-scrolling: touch;
overflow: auto;

現状どちらかのプロパティを消すor別の値にするの2つで解消できた。