safariで見るとハンバーガーメニューがずれてしまう

1023px以下でメニューが三に格納される、かつ三をクリックするとメニューが表示され、三が×に変わるよう制作してあるようなのですが、safariで見たときのみ動作がおかしくなってしまいます。

不具合１
ゆっくりスクロールすれば上部に固定されているのですが、勢いをつけてスクロールするとその勢いの分だけ三が下にずれてしまいます。
しかし、ずれた三をクリックしてもメニューが表示されず、もともとあった部分をクリックするとメニューが表示されるようになってしまいます。
表示されたメニューは本来表示されるべき位置で×のマークの上に表示されています。

不具合２
上部に問題なく表示されている状態で三をクリックしメニューを開き、そのままの状態でスクロールすると、スクロールの速度に関係なく下にずれてしまいます。

iphone7でchrome、pcでchrome、edge、firefoxのデベロッパーツールで確認すると、問題なく固定されています。
どうしたらいいのでしょうか。
前任者がいなくなってしまい、ほとんど知識のない中で苦戦しています。

position: fixed;がある場所にoverflow-y: scroll;を追加したり、
webkit-overflow-scrolling: touch;を追加したり、autoにしたり、
heightを設定してみたりしたのですが、結果は変わりませんでした。

ご教示いただけますと幸いです。
よろしくお願いいたします。

【HTML】

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title></title>
     <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1.0">
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <!-- js -->
    <script type="text/javascript" src="./js/js_action.js"></script>
    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="./css/common.css">
</head>
<body>
 <header>
    <div id="head">  
      <h1 class="logo"><a href="index.html"><img src="./img/logo.png" alt=""></a></h1>
      <div id="navToggle">
        <div>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </div><!-- #navToggle -->
      <nav id="main_nav">
        <div class="main_nav_list">
          <span><a href="index.html">メニュー1</a></span>
          <span><a href="***.html">メニュー2</a></span>
          <span><a href="***.html">メニュー3</a></span>
          <span><a href="***.html">メニュー4</a></span>
          <span><a href="***.html">メニュー5</a></span>
          <span><a href="***.html">メニュー6</a></span>
          <span><a href="***.html">メニュー7</a></span>
        </div>
      </nav><!-- #main_nav -->
    </div><!-- #head -->
  </header>
  <main>
  </main>
  <footer>
  </footer>
</body>
</html>
コード

【javascript】

  var $win = $(window),
      $main = $('#slick-box'),
      $header = $('header'),
      headerHeight = $header.outerHeight(),
      headerPos = $header.offset().top,
      fixedClass = 'is-fixed';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > headerPos ) {
      $header.addClass(fixedClass);
      $main.css('margin-top', headerHeight);
    } else {
      $header.removeClass(fixedClass);
      $main.css('margin-top', '0');
    }
  });
});

// 三 ボタンをクリックした時
$(function() {
    $('#navToggle').click(function(){//navに .openNav を付加・削除
        $('header').toggleClass('Navbutton');
        $('nav').toggleClass('openNav');
    });
});
コード

【CSS】

header,
1  -webkit-transition: .3s;
2  transition: .3s;
3}
4
5.is-fixed {
6  position: fixed;
7  top: 0;
8  left: 0;
9  z-index: 500;
10}
11
12.is-hide {
13  -webkit-transform: translateY(-100%);
14          transform: translateY(-100%);
15}
16#navToggle {
17		display: none;
18		position: fixed;
19		top: 2vw;
20		right: 13px;
21		width: 30px;
22		height: 25px;
23		cursor: pointer;
24		z-index: 97;
25}
26
27#navToggle div {
28		position: relative;
29}
30
31#navToggle div span {
32		display: block;
33		position: absolute;
34		top: auto;
35		left: 0;
36		width: 100%;
37		border-bottom: solid 3px #999;
38}
39
40#navToggle div span:nth-child(1) {
41		top: 0;
42}
43
44#navToggle div span:nth-child(2) {
45		top: 11px;
46}
47
48#navToggle div span:nth-child(3) {
49		top: 22px;
50}
51
52@media screen and (max-width: 599px) {
53		nav#main_nav {
54				position: fixed;
55				top: 47px;
56				right: -300px;
57				left: auto;
58				margin: 0;
59				padding: auto;
60				width: 50%;
61				background: rgba(1, 27, 47, 0.8);
62				z-index: 96;
63				-webkit-transition: .5s ease-in-out;
64				-moz-transition: .5s ease-in-out;
65				transition: .5s ease-in-out;
66				text-align: left;
67		}
68}
69
70@media screen and (min-width: 600px) and (max-width: 1023px) {
71	nav#main_nav {
72			position: fixed;
73			top: 47px;
74			right: -300px;
75			left: auto;
76			margin: 0;
77			padding: auto;
78			width: 30%;
79			background: rgba(1, 27, 47, 0.8);
80			z-index: 96;
81			-webkit-transition: .5s ease-in-out;
82			-moz-transition: .5s ease-in-out;
83			transition: .5s ease-in-out;
84			text-align: left;
85	}
86}	
87@media screen and (max-width: 1023px) {
88	nav#main_nav div.header_nav_list span,
89	nav#main_nav div.main_nav_list span {
90			border-bottom: dotted 1px #fff;
91			line-height: 3;
92	}
93	nav#main_nav div.header_nav_list span a,
94	nav#main_nav div.main_nav_list span a {
95			position: relative;
96			top: 0;
97			left: 0;
98			margin: 0;
99			padding: 0 2% 0 10%;
100			display: block;
101			color: #ffffff;
102	}
103	nav#main_nav div.header_nav_list span:last-child,
104	nav#main_nav div.main_nav_list span:last-child {
105			border-bottom: none;
106	}
107	nav#main_nav ul.main_nav_ul li {
108			display: block;
109			padding: 0;
110			border-bottom: dotted 1px #fff;
111			line-height: 3;
112	}
113	nav#main_nav ul.main_nav_ul li a {
114			display: block;
115	}
116	nav#main_nav ul.main_nav_ul li:last-child {
117			border-bottom: none;
118	}
119	#navToggle {
120			display: block;
121	}
122	.Navbutton div#navToggle span:nth-child(1) {
123			transform: translateY(11px) rotate(-45deg);
124			-webkit-transform: translateY(11px) rotate(-45deg);
125			-moz-transform: translateY(11px) rotate(-45deg);
126	}
127	.Navbutton div#navToggle span:nth-child(2) {
128			opacity: 0;
129	}
130	.Navbutton div#navToggle span:nth-child(3) {
131			transform: translateY(-11px) rotate(45deg);
132			-webkit-transform: translateY(-11px) rotate(45deg);
133			-moz-transform: translateY(-11px) rotate(45deg);
134	}
135	.openNav {
136			-moz-transform: translateX(-300px);
137			-webkit-transform: translateX(-300px);
138			transform: translateX(-300px);
139	}
140}

行動規範の内容に同意します

回答1件

ベストアンサー

safaliではposition:fixedの付いた要素の中にposition:fixedの要素があるとスクロール時ズレるようです。
バクかもしれません。
親要素にposition:fixedの設定がされているとiphone safariでスクロール時にズレた動きになる

現状headerと#navToggleにposition:fixedが付いているので、これに合致します。

ひとまず#navToggle要素をまるごと、headerの外に出せば解決すると思います。

セマンティクスに問題がある場合は#navToggleと#headを同階層にして、headerではなく#headにposition:fixedを付ける等工夫してみてください。

投稿2021/08/17 08:01

webgoto

総合スコア1293

kotorarui

2021/08/18 01:54

ご回答ありがとうございます。まず、#navToggle要素をまるごとheaderの外に出したところ、safariでも固定することに成功しました。しかし、三をクリックしたときに×にならなくなってしまったのと、メニューを開いた状態でスクロールすると、三は動きませんがメニューだけ下にずれてしまいます。また、HTMLの#navToggleと#headを同階層にして、Javascriptの3行目をheaderから#headに変更したところ、こちらもsafariで三が固定されました。しかし、スクロールすると三だけが固定して表示されるのみで、header部分は固定できなくなってしまいました。できれば後者で進めていければと思うのですが、Javascriptの変更が必要でしょうか？申し訳ありませんがご教示お願いいたします。

webgoto

2021/08/18 02:08

>>メニューを開いた状態でスクロールすると、三は動きませんがメニューだけ下にずれてしまいます。メニューの方にもposition:fixedが付いているので、position:fixedの中にposition:fixedで今までと同じ現象が起きています。 >>header部分は固定できなくなってしまいました。 header部分を固定(position:fixed)にすると、今までと同じ状態なので、ある種希望の状態です。 headerに適用していたスタイルを#headに適用するなどの対応が必要だと思います。このバグに当たらないようにするには、position:fixedの中にposition:fixed要素を作らない形でヘッダー部分を再構築する必要があると思います。

kotorarui

2021/08/18 02:35

#headにposition:fixedを指定したところ、ヘッダーが固定表示されるようになりました！ありがとうございます。 javascriptで.is-fixedにする必要性が分からなくなってしまいましたが、かたちになったので詳細はのちほど勉強していこうと思います。ありがとうございました。

行動規範の内容に同意します