CSS モーダルウィンドウのスクロール(ipad)

お世話になっております。

現在、html,css,javascriptを用いて簡易的なwebアプリを作成しています。
問題点に焦点を置いて現状の問題を質問させていただきますので、ご協力いただければ幸いです。

<実現したいこと>
モーダルウィンドウの表示において、コンテンツをモーダルウィンドウ内のスクロールで閲覧できるようにしたい

<現状>
PC画面、スマホ(iphone X)のブラウザで上記の機能を実現できていることを確認
確認ブラウザ：safari,chrome,edge

<問題点>
ipadにて動作確認したところ、モーダルウィンドウ表示後のスクロールができませんでした。
(スクロールしようとしても反応しない状態です)
モーダルウィンドウ表示前操作として、ボタンにタッチする操作があり、そこは問題なく動いていることは確認済みです。
使用ブラウザ：safari,chrome

まとめると、ipadの時のみモーダルウィンドウ内のスクロールができません。
iphoneのほうは問題なくスクロールができているため、原因がいまいち特定できない状態です。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
6    <title>dummy</title>
7    <link rel="stylesheet" type="text/css" href="stylesheets/style.css">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
9    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
10
11  </head>
12  <body>
13
14    <!-- ボタン -->
15    <div class="btn", id="btn">
16      <p>モーダルウィンドウ</p>
17    </div>
18
19    <!-- モーダルウィンドウ結果表示 -->
20    <div class="popup" id="js-popup-result">
21      <div class="popup-inner-result" id="popup-inner-result">
22        <!-- コンテンツ -->
23        <div id="contents">
24        </div>
25      </div>
26      <div class="black-background" id="js-black-bg-result"><div class="close-btn" id="js-close-btn-result"><div class="close-1"><div class="close-2"><i class="fas fa-times"></i></div></div></div></div>
27    </div>
28
29    <!-- Optional JavaScript -->
30    <script src="javascripts/script.js"></script>
31
32  </body>
33
34</html>
35

css
1
2.btn{
3  background-color: green;
4  width:100px;
5  height:100px;
6
7  font-weight: bold;
8}
9
10
11
12
13/**************************************
14*           モーダルウィンドウ
15**************************************/
16
17.popup {
18  /*position: fixed;*/
19  left: 0;
20  top: 0;
21  width: 100%;
22  height: 100%;
23  z-index: 9999;
24  opacity: 0;
25  visibility: hidden;
26  transition: .6s;
27}
28.popup.is-show {
29  opacity: 1;
30  visibility: visible;
31}
32
33.popup-inner-result {
34  overflow-y: scroll;
35  position: absolute;
36  left: 50%;
37  top: 50%;
38  transform: translate(-50%,-50%);
39  padding: 5%;
40  background-color: white;
41  z-index: 10000;
42
43  border-radius: 3rem;
44
45  -webkit-overflow-scrolling: touch;
46  max-height: 100vh;
47
48}
49
50
51@media(max-width: 600px) {
52
53  .popup-inner-result {
54    overflow-y: scroll;
55    position: absolute;
56    left: 50%;
57    top: 50%;
58    transform: translate(-50%,-50%);
59    padding: 5%;
60    background-color: white;
61    z-index: 2;
62
63    border-radius: 3rem;
64
65    -webkit-overflow-scrolling: touch;
66    max-height: 100vh;
67
68  }
69}
70
71.close-btn {
72  position: absolute;
73  right: 2%;
74  top: 2%;
75  width: 50px;
76  height: 50px;
77  line-height: 50px;
78  text-align: center;
79  cursor: pointer;
80  /*background-color: green;*/
81  border-radius: 100%;
82  font-size: 100%;
83}
84
85.close-1{
86  height: 30px;
87  width: 4px;
88  margin-left: 23px;
89  background-color: white;
90  transform: rotate(45deg);
91  Z-index:1;
92}
93
94.close-2{
95  height: 30px;
96  width: 4px;
97  background-color: white;
98  transform: rotate(90deg);
99  Z-index:2;
100}
101
102
103@media(max-width: 600px) {
104  .close-btn {
105    width: 30px;
106    height: 30px;
107  }
108
109  .close-1{
110    height: 30px;
111    width: 2.5px;
112    margin-left: 14px;
113  }
114
115  .close-2{
116    height: 30px;
117    width: 2.5px;
118  }
119}
120
121
122.close-btn i {
123  font-size: 50px;
124  color: #39a9d6;
125}
126.black-background {
127  position: absolute;
128  left: 0;
129  top: 0;
130  width: 100%;
131  height: 100%;
132  background-color: rgba(0,0,0,.8);
133  z-index: 1;
134}
135

javascript
1
2var btn = document.getElementById("btn");
3var popupwindowResult = document.getElementById("popup-inner-result");
4
5
6btn.addEventListener('click', function() {
7
8  showResultModal();
9
10})
11
12/***************************************************************
13*                     画面初期ロード時
14****************************************************************/
15window.onload = function(){
16
17  var sW,sH;
18  var width,height;
19
20	sW = window.innerWidth
21	sH = window.innerHeight;
22
23  //PC画面(横長の場合)
24  if(sW >= sH){
25    width = sW*0.5;
26    height =sH*0.65;
27
28  }else{
29    width = sW*0.6;
30    height =sH*0.7;
31  }
32
33  /* ポップアップウィンドウ(結果表示) */
34  if(popupwindowResult != null){
35    popupwindowResult.style.width = width*1.3 + "px";
36    popupwindowResult.style.height = height*1.1 + "px";
37  }else{
38    console.log("ERROR:popupwindowResult is null, Function:window.onload");
39  }
40
41  var table = "";
42  var contents = document.getElementById("contents");
43
44  for(var i = 0; i < 20; i++){
45    table = table + "<p>ダミー</p><br>";
46  }
47
48  contents.innerHTML += table;
49
50}
51
52/*******************************************
53*      　　 結果モーダルウィンドウ表示
54*******************************************/
55function showResultModal(){
56  var popup = document.getElementById('js-popup-result');
57  if(!popup) return;
58  popup.classList.add('is-show');
59
60  var closeBtn = document.getElementById('js-close-btn-result');
61
62  closePopUp(closeBtn);
63
64  function closePopUp(elem) {
65    if(!elem) return;
66    elem.addEventListener('click', function() {
67      popup.classList.remove('is-show');
68    })
69  }
70}
71

thyda.eiqau

2020/10/19 04:08

上に何か別の要素が載っていたり、モーダルやその親子の要素に期待とは違うサイズ等の指定が入っていたりしませんか。インスペクターで確認してみてください。ご提示のコードでは第三者がその現象を確認できるようになっていません（モーダルを出す処理とかが無い）ので、現象を再現させられる最低限のコードをご提示ください。最低限というのは、関係のない部分（消しても現象が発生する・しないに影響しない部分）は消して、原因になっているところだけ残してくださいという意味です。もっとも、そこまで出来たらご自身で解決できるかもしれませんが。