iosのsafariで、divが重なっていると下の方をタッチしてしまう現象。

Question

モーダルが表示されている間、後ろにあるDOM(元のページ)のスクロールを固定し、選択されないようにしたいです。

http://mismith0227.github.io/playground/src/scrollfixed/test1.html
上記と同じようなページを作ったところ、後ろの要素をスクロールさせないところまでは成功しました。

ただ、iphone6sで確認したところ、出てきたモーダルをスクロールできず、後ろの要素にタッチしているような現象が起きます。（上記リンクでも起きます）。常時起きるわけではなく、気まぐれに起きます。（例えば、モーダルを一番下までスクロールした後、一旦指を離し、もう一度スクロールしようとすると起きます。）

原因も解決方法も検討がつかず、困っています。

Answer 1

iPhone7plus実機で問題が再現出来ませんでした。

ただ、考え方として参考までに。
すでに回答されているように、コンテンツとメニューは兄弟関係に置きます。

そして、モーダルメニューをfixedとして配置します。
ul要素にheightを指定(例えば100vh)し、overflowをscrollにすれば、ul.inner内のみのスクロールになります。
あとはJS側でコンテンツのtouchスクロールを禁止すればokです。

<div id='menu'>//fixed <ul id='inner'> <li>navigation1</li> <li>navigation2</li> <li>navigation3</li> <li>navigation4</li> <li>navigation5</li> <li>navigation6</li> <li>navigation7</li> <li>navigation8</li> <li>navigation9</li> <li>navigation10</li> </ul> </div>

Answer 2

コンテンツとモーダルが親子関係になってしまっているので、
兄弟要素になるようにしてみてはいかがでしょうか。

具体的には、現状モーダルを開く時に、bodyに設定しているfixedの設定をmain要素に設定する形に変更します。

参考

• モーダルウィンドウを開いた時に背景のスクロールを固定する