Safariでハンバーガーメニューがズレるのを直したい

実現したいこと

Safariで作成中のサイトを閲覧した際に、ハンバーガーメニュー内のリンクをクリックすると、クリックしたページに遷移するまでの間、ハンバーガーメニューの表示がズレてしまうのを修正したいです。
（ページ遷移後はズレが直ります。）

前提

現在、HP作成のためワードプレスのオリジナルテーマを自作しており、HTML・CSS・PHP・JavaScriptを使用しております。

レスポンシブ対応でハンバーガーメニューを設置しており、Safariでサイトを閲覧するとハンバーガーメニューの表示がずれてしまいます。

正常時（GoogleやMicrosoftEdgeで閲覧）：ハンバーガーメニュー展開後にメニューリンクをクリックすると、すぐにメニュー一覧が閉じてページ遷移し、2枚目の画像のハンバーガーメニューが表示される。
ハンバーガーメニュー展開時↓

リンククリック後↓

異常時(Safariで閲覧)：メニューリンククリック後、メニュー一覧が閉じるまでに数秒かかり、その間、ハンバーガーメニューが次の画像のように表示される。

※ワードプレスのローカル環境を構築するLocalにて共有リンクのURLを取得し、Safariで閲覧している状態です。（GoogleとMicrosoftEdgeも同様の状況で正常に動くことを確認しております。）

初めての質問でつたないご説明となり恐縮ですが、上記の原因や解決策として考えられることをご教授いただけますと幸いです。

該当のソースコード

html
1<div class="openbtn4"><span></span><span></span><span></span></div>
2             <div id="g-nav">
3                 <div id="g-nav-list">
4                     <ul>
5                         <li>
6                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">ホーム</a>
7                         </li>
8                         <li>
9                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>menu1">メニュー１</a>
10                         </li>
11                         <li>
12                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>menu2">メニュー２</a>
13                         </li>
14                         <li>
15                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>menu3">メニュー３</a>
16                         </li>
17                         <li>
18                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>menu4">メニュー４</a>
19                         </li>
20                         <li>
21                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>menu5">メニュー５</a>
22                         </li>
23                         <li>
24                            <a href="<?php echo esc_url( home_url( '/' ) ); ?>menu6">メニュー６</a>
25                         </li>
26                     </ul>
27                 </div>     
28              </div>
29    </div>

css
1
2/******************** レスポンシブ ***************************/
3
4@media screen and (min-width: 959px) {    
5#g-nav {
6display: none;
7}
8}
9
10  @media screen and (max-width: 959px) {
11/* チェックボックスを非表示にする */
12#menu-btn-check {
13display: none;
14}
15
16header {
17width: 100%;
18max-width: 959px;
19height: 100px;
20margin: 0 auto;
21background-color: #F1E7C7;
22position: fixed;
23top: 0;
24right: 0;
25bottom: 0;
26left: 0;
27}
28
29li + li {
30  border-left: none;
31  
32}
33
34/*==================================================
35　5-2-4 MENUがCLOSEに
36===================================*/
37
38.openbtn4{
39position: relative;
40background:#87BC25;
41cursor: pointer;
42width: 50px;
43height:50px;
44top: 20px;
45right: 20px;
46position: fixed;
47border-radius: 50%;
48}
49
50_::-webkit-full-page-media,_:future,:root .openbtn4{
51  position: relative;
52  background:#87BC25;
53  cursor: pointer;
54  width: 50px;
55  height:50px;
56  top: 20px;
57  right: 20px;
58  position: fixed;
59  border-radius: 50%;
60  }
61
62/*ボタン内側*/
63.openbtn4 span{
64display: inline-block; 
65display: block;
66transition: all .6s;/*アニメーションの設定*/
67position: absolute;
68left: 14px;
69height: 2px;
70border-radius: 5px;
71background: #fff;
72width: 45%;
73}
74
75/* _::-webkit-full-page-media,_:future,:root .openbtn4 span{
76  display: inline-block;
77  transition: all .6s;
78  position: absolute;
79  left: 14px;
80  height: 2px;
81  border-radius: 5px;
82  background: #fff;
83  left: 14px;
84  height: 2px;
85  width: 45%;
86  } */
87
88
89.openbtn4 span:nth-of-type(1) {
90top:13px; 
91}
92
93.openbtn4 span:nth-of-type(2) {
94top:19px;
95}
96
97.openbtn4 span:nth-of-type(3) {
98top:25px;
99}
100
101
102/* _::-webkit-full-page-media,_:future,:root.openbtn4 span:nth-of-type(1) {
103  top:13px; 
104  }
105  
106  _::-webkit-full-page-media,_:future,:root .openbtn4 span:nth-of-type(2) {
107  top:19px;
108  }
109  
110  _::-webkit-full-page-media,_:future,:root .openbtn4 span:nth-of-type(3) {
111  top:25px;
112  } */
113
114
115.openbtn4 span:nth-of-type(3)::after {
116content:"menu";/*3つ目  の要素のafterにMenu表示を指定*/
117position: absolute;
118top:5px;
119left:-3px;
120color: #fff;
121font-size: 0.5rem;
122text-transform: uppercase;
123}
124
125_::-webkit-full-page-media,_:future,:root .openbtn4 span:nth-of-type(3)::after {
126  content:"menu";/*3つ目  の要素のafterにMenu表示を指定*/
127  position: absolute;
128  top:5px;
129  left:10px;
130  color: #fff;
131  font-size: 0.5rem;
132  text-transform: uppercase;
133  }
134
135/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
136
137.openbtn4.active span:nth-of-type(1) {
138top: 14px;
139left: 18px;
140transform: translateY(6px) rotate(-45deg);
141width: 30%;
142}
143
144.openbtn4.active span:nth-of-type(2) {
145opacity: 0;
146}
147
148.openbtn4.active span:nth-of-type(3){
149top: 26px;
150left: 18px;
151transform: translateY(-6px) rotate(45deg);
152width: 30%;
153}
154
155.openbtn4.active span:nth-of-type(3)::after {
156content:"close";
157transform: translateY(0) rotate(-45deg);
158top:5px;
159left:-1px;
160}
161
162
163_::-webkit-full-page-media,_:future,:root .openbtn4.active span:nth-of-type(3)::after {
164  content:"close";
165  transform: translateY(0) rotate(-45deg);
166  top:5px;
167  left:2px;
168  }
169/*========= レイアウトのためのCSS ===============*/
170
171a{
172text-decoration: none;
173}
174
175.lead{
176margin:20px 0 0 0;
177}
178
179.btn-block{
180width:200px;  
181padding: 30px;
182}
183
184/*========= ナビゲーションのためのCSS ===============*/
185
186#g-nav{
187/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
188position:fixed;
189z-index: 1001;
190/*ナビのスタート位置と形状*/
191top:0;
192right: -120%;
193width:100%;
194height: 100vh;/*ナビの高さ*/
195/* background:#fdfbf2; */
196background:#87BC25;
197/*動き*/
198transition: all 0.6s;
199}
200
201/*アクティブクラスがついたら位置を0に*/
202#g-nav.panelactive{
203right: 0;
204}
205
206/*ナビゲーションの縦スクロール*/
207#g-nav.panelactive #g-nav-list{
208/*ナビの数が増えた場合縦スクロール*/
209position: fixed;
210z-index: 1001; 
211width: 100%;
212height: 100vh;/*表示する高さ*/
213overflow: auto;
214-webkit-overflow-scrolling: touch;
215}
216
217/*ナビゲーション*/
218#g-nav ul {
219/*ナビゲーション天地中央揃え*/
220position: absolute;
221z-index: 1001;
222top:50%;
223left:50%;
224transform: translate(-50%,-50%);
225}
226
227/*リストのレイアウト設定*/
228#g-nav li{
229list-style: none;
230text-align: center;
231}
232
233#g-nav li a{
234color: #fff;
235text-decoration: none;
236padding:10px;
237display: block;
238text-transform: uppercase;
239letter-spacing: 0.1em;
240font-weight: bold;
241font-size: 14px;
242font-weight: lighter;
243border-bottom: solid 1px #fff;
244text-align: left;
245}
246
247/*========= ボタンのためのCSS ===============*/
248.openbtn4{
249position:fixed;
250z-index: 9999;/*ボタンを最前面に*/
251top:10px;
252right: 13px;
253cursor: pointer;
254width: 50px;
255height:50px;
256}
257

javascript
1$(".openbtn4").click(function () {//ボタンがクリックされたら
2    $(this).toggleClass('active');//ボタン自身に activeクラスを付与し
3      $("#g-nav").toggleClass('panelactive');//ナビゲーションにpanelactiveクラスを付与
4  });
5  
6  $("#g-nav a").click(function () {//ナビゲーションのリンクがクリックされたら
7      $(".openbtn4").removeClass('active');//ボタンの activeクラスを除去し
8      $("#g-nav").removeClass('panelactive');//ナビゲーションのpanelactiveクラスも除去
9  });