iOSでoverflow-x: hiddenがきかない

実現したいこと

iOSで横スクロールできないようにする

発生している問題・分からないこと

ヘッダーのレスポンシブデザインで、ハンバーガーメニューを使用しています。
アイコンをクリックすると、画面外のメニューが横すべりで出てくるようにしていて、bodyにoverflow-x: hiddenを使うことで、アイコンがクリックされていない時はメニューを隠した状態にしようとしています。
pcの検証ツール上ではクリアできますが、ipnoneになると横スクロールできるようになってしまいます。
改善点のわかる方がいらっしゃいましたらご教示ください。

該当のソースコード

html
1<body>
2<header>
3       <div id="top"></div>
4       <div class="logo">
5            <a href="index.html">
6            <img src="img0/logo.png"
7              srcset="img0/logo.png 1x,
8                      img0/logo2x.png 2x"
9                 alt="ロゴ"></a>
10       </div>
11       <nav>
12            <ul class="nav-list">
13             <li class="nav-list-item first"><a href="start.html">はじめてのかたへ</a></li>
14             <li class="nav-list-item category"><a href="index.html#jump">カテゴリ</a></li>
15             <li class="nav-list-item template"><a href="template.html">テンプレート</a></li>
16             <li class="nav-list-item portfolio"><a href="portfolio.html">作品紹介<a/></li>
17            </ul>
18          <div class="burger">
19              <div class="line1"></div>
20              <div class="line2"></div>
21              <div class="line3"></div>
22          </div>
23       </nav>
24</header>
25<section>
26</section>
27<script src="js/script.js"></script>
28</body>

css
1html {
2     overflow: auto;
3     }
4body {
5     margin: 0 auto;
6     overflow-x: hidden;
7     }
8/*文字サイズ*/
9p {
10   font-size: 20px;
11   line-height: 50px;
12   font-family: "Zen Maru Gothic", serif;
13   font-weight: 400;
14   font-style: normal;
15   color: #222222;
16}
17
18h1 {
19   font-size: 26px;
20   font-family: "Zen Maru Gothic", serif;
21   font-weight: 400;
22   font-style: normal;
23   color: #222222;
24}
25
26h2 {
27   font-size: 30px;
28   font-family: "Zen Maru Gothic", serif;
29   font-weight: 400;
30   font-style: normal;
31}
32
33h3 {
34   font-size: 18px;
35   font-family: "Zen Maru Gothic", serif;
36   font-weight: 400;
37   font-style: normal;
38   color: #222222;
39}
40
41a {
42   text-decoration: none;
43   font-family: "Zen Maru Gothic", serif;
44   font-weight: 400;
45   color: #222222;
46   
47   }
48
49header ul{
50  padding-left:0;
51  display: flex;
52  justify-content: flex-end;
53}
54
55header li {
56   list-style:none;
57   margin: 0 auto;
58   text-align: center;
59   border-left: 1px solid #efefef;
60   }
61
62header li:last-child{
63                    border-right: 1px solid #efefef
64                    }
65* {
66   box-sizing: border-box;
67   }
68
69/*ヘッダー*/
70header {
71        width: 100%;
72        height: 120px;
73        padding: 5px;
74        margin: 0 auto;
75        z-index: 999;
76        display: flex;
77        justify-content: space-between;
78        align-items: center;
79        box-shadow: 0 2px 2px rgba(54, 54, 54, .06);
80        }
81        
82.logo {
83       height: 100px;
84       padding: 0px 10px;
85       text-align: center;
86       }
87
88nav {
89     margin: 0 0 0 auto;
90     }
91
92.nav-list {
93          min-width: 20%;
94          display:flex;
95          align-items: center;
96          transition: all 0.5s ease-in-out;
97          z-index: 999;
98          }
99
100.nav-list-item {
101               font-size: 16px;
102               text-align: center;
103               padding: 1em 30px;
104               white-space: nowrap;
105               font-family: "Zen Maru Gothic", serif;
106               font-weight: 400;
107               font-style: normal;
108               display: inline;
109               }
110
111.nav-list-item:hover {
112                      background-color: #efefef;
113                      cursor: pointer;
114                      }
115
116.burger  div {
117             display: none;
118             cursor: pointer;
119             width: 25px;
120             height: 3px;
121             background-color: #222222;
122             margin: 5px;
123             transition: all 0.5s ease-in-out;
124             }
125
126.nav-active {
127            transform: translateX(0%) !important;
128            }
129
130/* 959px以下に適用されるCSS（タブレット用） */
131@media screen and (max-width: 959px) {
132body {
133     overflow-x: hidden;
134     }
135
136header {
137       max-width: 959px;
138       }
139
140header ul{
141         flex-direction: column;
142         justify-content: normal;
143         }
144
145header li:first-child{
146                    padding-top: 40px;
147                    }
148
149.logo img {
150          max-width: 200px;
151          }
152
153.logo {
154      max-height: 60px;
155      }
156
157.nav-list {
158          position: absolute;
159          right: 0;
160          height: 380px;
161          top: 100px;
162          background-color: #efefef;
163          flex-direction: column;
164          align-items: center;
165          width: 100%;
166          transform: translateX(100%);
167          }
168
169.nav-list a {
170            font-size: 20px;
171            }
172
173.nav-list-item {
174               padding: 30px;
175               }
176
177.burger div {
178            display: block;
179            margin-right: 30px;
180            }
181
182.toggle .line1 {
183               transform: rotate(-45deg) translate(-5px, 6px);
184               }
185
186.toggle .line2 {
187               opacity: 0;
188               }
189
190.toggle .line3 {
191               transform: rotate(45deg) translate(-5px, -6px);
192               }
193}

javascript
1const burger = document.querySelector(".burger");
2const nav = document.querySelector(".nav-list");
3
4
5burger.addEventListener('click',() => {
6    nav.classList.toggle("nav-active");
7    
8    burger.classList.toggle("toggle");
9 });