-webkit-overflow-scrolling: touch; ipadでの不具合

Question

<section class="wrap">
<div class="t">aaa</div>
<div class="t">aaa</div>
<div class="t">aaa</div>
<div class="modal">hogehoge</div>
</section>

css

.wrap{
position:relative;
width:100px;
height:500px;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
.modal {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:10000;
background:#000;
color:#fff;
display:none;
}

現在上記のような構造で、とあるボタンを押すと
.modalが画面全体に開くものを実装しているのですが、
pcは問題ないのですがipad(ios 11.2.6)だと.wrap内にマスクされた
状態で表示されてしまいます。
-webkit-overflow-scrolling: touch;
をはずすと直るのですがこれはいれたいのと、
構造上どうしても<div class="modal">hogehoge</div>を
.wrapのなかに入れておく必要があり（運用ルール上ですいません・・・）
上記の状態のまま改善することは可能でしょうか？

Answer 1

私自身も全く同じ問題にぶち当たりました。
色々と調べましたが、これを解決する方法が見つからず
ちょっと回り道した形で実現しました。

ご参考までにどうぞ。
https://teratail.com/questions/169473