ios safari モーダルを立ち上げているのに下のレイヤーをスクロールしてしまう。

質問です。

【今回期待する動作】
モーダルを立ち上げたとき、背景を固定しつつ、慣性スクロールすること

【現状】
ios safariでモーダルを立ち上げ、スクロールしたときに、一番下までスクロールしてから一部余白をスクロールすると、下のレイヤーにフォーカスしてスクロールしてしまいます。また、overflow:hidden; や position:fixed; をかけて背景固定をしているのですが、position: fixed; をかけていることにより、一部余白をスクロールすると、下のレイヤーにフォーカスしてスクロールしてしまいます。が固定されてモーダルがスクロールできなくなってしまいます。しかし、一部余白をスクロールすると期待している動作に戻ります。

ちなみに、このバグはios12 safari以前で起きるバグです。
ios13 safariでは期待する動作をします。

[html]
<body>
 <div class="box">
   <header></header> //z-index: 10;
   <div class="main"></div> //z-index: 1;
   <div class="item-modal modal touch" style="display: none"></div> //z-index: 0;
   <div class="item-modal modal touch" style="display: none"></div> //z-index: 0;
 </div>
</body>

[css]

//ここからclick eventが発火する前のstyle
.body{
 height: 100%;
 width: 100%;
}

.box{
 height: 100%;
}

.header{
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 position: relative;
 height: 58px;
 padding: 10px 0;
 z-index: 10;
 position: fixed;
 width: 100%;
 top: 0;
 left: 0;
 background-color: #EEEEEF;
 -webkit-transition: -webkit-transform 300ms;
 -moz-transition: -moz-transform 300ms;
 -o-transition: -o-transform 300ms;
 transition: transform 300ms;
 -webkit-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

.main{
 box-sizing: border-box;
 position: relative;
 background-repeat: repeat-x;
 width: 100%;
 z-index: 1;
 transition: transform 300ms;
 background-color: #888;
 min-height: auto;
}

.item-modal{
 -webkit-box-align: start;
 align-items: flex-start;
}

.modal{
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 z-index: 0;
 -webkit-box-pack: center;
 justify-content: center;
}

.touch{
 overflow-y: auto;
 background-color: #f7f7f7;
}

//------------------------------------------------------------------------
//ここからclick eventが発火した後、変更のあるstyle

.body{
 height: 100%;
 width: 100%;
 overflow: hidden;
 position: fixed;
}

//click event発火後、divタグに直書きしたstyleが変わる
スタイル属性{
 display: flex;
}

//click event発火後、is-activeクラスが追加される
.modal.is-active{
 z-index: 19999
}

.touch{
 overflow-y: auto;
 background-color: #f7f7f7;
 -webkit-overflow-scrolling: touch;
}

初めて見てsafariのバグで頭を抱えています。
ナレッジのある方がいらっしゃいましたら、ご教授よろしくお願いいたします。

kyoya0819

2019/11/12 11:42

iOS12の詳細バージョンをお願いします。

kyoya0819

2019/11/12 11:42

あとSafariのバージョンも

hosodaaaaa

2019/11/12 12:38

実機で検証したバージョンです。 -------------------------------- ios : 12.4.1 safari : 604.1 -------------------------------- ios : 10.3.4 safari : 602.1 --------------------------------

hosodaaaaa

2019/11/12 12:44

正常に動作するios13の各バージョンを記載するのを忘れてしまいましたので、以下が確認ください。 -------------------------------- ios : 13.2.0 safari : 604.1 --------------------------------