[CSS、iOS]-webkit-overflow-scrolling:touch;を指定している領域の子要素をモーダルで表示すると親要素の範囲内にしか現れない

Question

前提・実現したいこと

カルーセル内のコンテンツをモーダルで全画面表示させたい。

<ul>内のlistを-webkit-overflow-scrolling:touch;で 簡易カルーセルにしています。

list内にはモーダルを出現させる為のトリガーと
モーダルに表示するコンテンツが内包されています。

モーダル表示するコンテンツは
display:none;にしておいて
jQueryでfadeInさせています。

発生している問題・エラーメッセージ

windows:chrome、IE、Edge、firefox
android:chrome
では問題なく意図通りの動きになりましたが
iOS:safari、chrome
で動作させた際、

<ul>内にモーダルが表示され全画面表示になりません。 重なり順の問題かとz-indexなどを見直してみましたが 原因がわかりません。

調べてみると
https://github.com/scottjehl/Device-Bugs/issues/14
にoverflow-scrolling:touch;を指定していると
z-indexが無視されるようだという事が書かれていましたが
これを解消する方法がわかりません。

該当のソースコード

<ul>
 <li>
  <label>button1</label>
  <div><p>モーダル表示させるコンテンツ1</p></div>
 </li>
 <li>
  <label>button2</label>
  <div><p>モーダル表示させるコンテンツ2</p></div>
 </li>
 <li>
  <label>button3</label>
  <div><p>モーダル表示させるコンテンツ3</p></div>
 </li>
</ul>

ul{
 width:100%;
 overflow-x:scroll;
 -webkit-overflow-scrolling:touch;
 overflow-scrolling:touch;
 display:flex;
 list-style:none;
}
li{
 width:250px;
 min-width:250px;
 padding:20px;
 box-sizing:border-box;
 border:1px solid #CCC;
}
label{
 cursor:pointer;
}
label:after{
 content:none;
}
div{
 display:none;
 position:fixed;
 top:0;left:0;right:0;bottom:0;
 z-index:100;
 background-color:rgba(0, 0, 0, .70);
 padding:30px;
}
p{
  background-color: #FFF;
  padding:20px;
}

$(function() {
  var $overlay = $('div');
  $('label').on('click', function() {
    $(this).next($overlay).fadeIn(300);
  });
});
```※jQueryのver.は3.3.1です。
### 試したこと
 overflow-x:scroll;
または
 -webkit-overflow-scrolling:touch;
を切ると意図通りの動きになりますが
この2つを指定したままでモーダルを発動させたいのですが
上手くいきません。

Answer 1

overflow-x:scroll;
-webkit-overflow-scrolling:touch;
の両方を指定している状態で実現する事は現状不可能に近い事が判明した為
モーダル表示させるコンテンツを<ul>要素の外にコピーして表示する方法で暫定的に実現。

フロー
１）カルーセルコンテンツの<label>をタップ
２）<label>要素の直後にある非表示状態モーダルコンテンツをコピー
３）カルーセルコンテンツの外にあるdiv.modalにコピーしたコンテンツをappend
４）.modalをフェードイン
５）モーダルコンテンツ内の閉じるボタンをタップしたら
６）.modalをフェードアウト
７）.modalにペーストされていたコンテンツを空に戻す

という面倒な段階を踏むことになりましたが
一応意図通りの動きにはなりました。

これしか方法無いのかなぁ……。

<ul>
 <li>
  <label>button1</label>
  <div class="off"><div class="on"><p>モーダル表示させるコンテンツ1</p><button class="close">閉じる</button></div></div>
 </li>
 <li>
  <label>button2</label>
  <div class="off"><div class="on"><p>モーダル表示させるコンテンツ2</p><button class="close">閉じる</button></div></div>
 </li>
 <li>
  <label>button3</label>
  <div class="off"><div class="on"><p>モーダル表示させるコンテンツ3</p><button class="close">閉じる</button></div></div>
 </li>
</ul>
<div class="modal"></div>

ul{
 width:100%;
 overflow-x:scroll;
 -webkit-overflow-scrolling:touch;
 overflow-scrolling:touch;
 display:flex;
 list-style:none;
}
li{
 width:250px;
 min-width:250px;
 padding:20px;
 box-sizing:border-box;
 border:1px solid #CCC;
}
label{cursor:pointer;}
label:after{content:none;}
.off{
  display: none;/*liモーダル表示させるコンテンツ(非表示)*/
}
.on{
　padding:20px;/*ulの外にコピーする部分*/
}
p{
  background-color: #FFF;
  padding:20px;
}
.modal{
 display:none;
 position:fixed;
 top:0;left:0;right:0;bottom:0;
 z-index:100;
 background-color:rgba(0, 0, 0, .70);
}
button{cursor:pointer;}

$(function() {
  $("label").on('click',function(){
    //クリックされた要素の次のdivの小要素をコピーして.modalにペースト
    $(this).next("div").children(".on").clone().appendTo(".modal");
    //.modalをフェードイン
    $(".modal").fadeIn(300);
      //.closeが押されたら
      $("button").on("click",function(){
        $.when(//.modalをフェードアウトしてから
          $(".modal").fadeOut(300)
        ).done(//.modalにペーストした内容を削除
          $(".modal").empty()
        )
    });
  });
});