ハンバーガーメニューのブラウザバック時の挙動がおかしい

前提・実現したいこと

現在コーディング中のサイトにおいて
ハンバーガーメニューを実装しております。

ハンバーガーメニューを展開後、その中のリンクをクリックした後に、
ブラウザバックをするとハンバーガーメニューが展開状態のものが表示されるのですが、
その際にフェードのような動きが発生してしまいます。

ハンバーガーメニューが展開状態のものが表示されることは
キャッシュの影響であることは理解していて、それ自体は問題ないのですが
その表示のされ方が問題とされております。

その原因と解決策をご教示いただけないでしょうか。

該当のソースコード

html
1<p class="hamburger">
2	<a class="menu-trigger" hrer="#">
3		<span></span>
4		<span></span>
5		<span></span>
6	</a>
7</p>
8<div class="hgb">
9<nav>
10	<h3 class="acc-btn">A</h3>
11	<ul class="acc-content">
12		<li><a href="/a/a1">A1</a></li>
13		<li><a href="/a/a2">A2</a></li>
14		<li><a href="/a/a3">A3</a></li>
15		<li><a href="/a/a4">A4</a></li>
16	</ul>
17	<h3 class="acc-btn">B</h3>
18	<ul class="acc-content">
19		<li><a href="/b/b1">B1</a></li>
20		<li><a href="/b/b2">B2</a></li>
21		<li><a href="/b/b3">B3</a></li>
22		<li><a href="/b/b4">B4</a></li>
23	</ul>
24</nav>
25</div>

css
1.hamburger {
2	position: fixed;
3	top: 0px;
4	right: 0px;
5	z-index: 1000;
6	display: -webkit-box;
7	display: -ms-flexbox;
8	display: flex;
9	-webkit-box-align: center;
10	-ms-flex-align: center;
11	align-items: center;
12	-webkit-box-pack: center;
13	-ms-flex-pack: center;
14	justify-content: center;
15	-webkit-box-orient: vertical;
16	-webkit-box-direction: normal;
17	-ms-flex-direction: column;
18	flex-direction: column;
19	width: 50px;
20	height: 50px;
21	-webkit-box-sizing: border-box;
22	box-sizing: border-box;
23	cursor: pointer;
24}
25.hamburger > span{
26	font-size:10px;
27	transform: scale(0.8);
28	letter-spacing: 0;
29}
30.hamburger a,
31.hamburger a:hover,
32.hamburger a:focus {
33        opacity: 1;
34}
35.menu-trigger,
36.menu-trigger span {
37        display: inline-block;
38        -webkit-transition: all .4s;
39        transition: all .4s;
40        -webkit-box-sizing: border-box;
41        box-sizing: border-box;
42}
43.menu-trigger {
44        position: relative;
45        width: 20px;
46        height: 20px;
47        float: right;
48}
49.menu-trigger span {
50        position: absolute;
51        left: 0;
52        width: 100%;
53        height: 2px;
54	background-color:#000;
55}
56.menu-trigger span:nth-of-type(1) {
57        top: 0;
58}
59.menu-trigger span:nth-of-type(2) {
60        top: 9px;
61}
62.menu-trigger span:nth-of-type(3) {
63	right:0;
64	left: auto;
65        bottom: 0;
66}
67.active .menu-trigger {
68        -webkit-transform: rotate(360deg);
69        transform: rotate(360deg);
70}
71.active .menu-trigger span:nth-of-type(1) {
72        -webkit-transform: translateY(9px) rotate(-45deg);
73        transform: translateY(9px) rotate(-45deg);
74}
75
76.active .menu-trigger span:nth-of-type(2) {
77        -webkit-transform: translateY(0) rotate(45deg);
78        transform: translateY(0) rotate(45deg);
79}
80.active .menu-trigger span:nth-of-type(3) {
81        opacity: 0;
82 }
83.hgb{
84	position: fixed;
85	left:0;
86	background-color:#ffffff;
87	top:-100%;
88	transition: ease 1.0s;
89	z-index: 100;
90	padding:50px 0 0 0;
91	height:100%;
92	width:100%;
93	overflow: hidden;
94}
95.acc-content li a{
96	font-size:16px;
97	line-height: 60px;
98	padding:0 10px;
99	display: block;
100	position: relative;
101}
102.acc-content li a:before{
103	content:"-";
104	margin-right: 5px;
105}
106.acc-content li a:after{
107	content:">";
108	position: absolute;
109	top:0px;
110	right:10px;
111}
112.hgb h3:after{
113	content:"+";
114	position: absolute;
115	top:0px;
116	right:10px;		
117}   
118.acc-btn.action:after{
119	content:"ー";
120}

jquery
1//ハンバーガーメニュー
2$(document).ready(function () {
3    var position, back;
4    $('.menu-trigger, .overlay,.sp-nav-btn').on('click', function () {
5        position = $(window).scrollTop();
6        $('body').toggleClass('active');	
7		$(".acc-btn").removeClass('action');
8		$(".acc-content").hide();
9		if($('body').hasClass('active')){
10			$('.hgb').css({'top':'0','overflow':'auto'});
11		}
12		else{
13			$('.hgb').css({'top':'-100%','overflow':'hidden'});
14		}
15    });
16});
17//アコーディオン
18$(function () {
19    $(".acc-content").hide();
20    $(".acc-btn").click(function () {
21        $(this).next().slideToggle();
22        $(this).toggleClass('action');
23    });
24});

※ハンバーガーメニュー内にアコーディオン機能を実装しております。

試したこと

当初は下記のようにclassのみでハンバーガーの動きを制御していたのですが
html直書きであればかわるのではとstyleに反映するjsに変更いたしました。

css
1.hgb{
2	position: fixed;
3	left:0;
4	background-color:#ffffff;
5	top:-100%;
6	transition: ease 1.0s;
7	z-index: 100;
8	padding:50px 0 0 0;
9	height:100%;
10	width:100%;
11	overflow: hidden;
12}
13.active .hgb{
14	top:0;
15	overflow: auto;
16} 
17

jquery
1//ハンバーガーメニュー
2$(document).ready(function () {
3    var position, back;
4    $('.menu-trigger, .overlay,.sp-nav-btn').on('click', function () {
5        position = $(window).scrollTop();
6        $('body').toggleClass('active');	
7		$(".acc-btn").removeClass('action');
8		$(".acc-content").hide();
9    });
10});

Lhankor_Mhy

2020/08/01 02:14

フェード、ということは、透明だったものがぼんやり表示されるようなエフェクトがかかる、という理解で合っていますか？ https://ja.wikipedia.org/?curid=460130

yosuke_ir

2020/08/01 03:13

そうです。それに加えてハンバーガーメニューが縦横に拡大して画面いっぱいに広がるような挙動が発生しています。基本的にハンバーガーの展開には拡大、縮小は設定しておらず、縦方向のスライドのみで出し入れ設定しておりますので設定外の動きと認識しております。

yosuke_ir

2020/08/01 03:15

理想状態は、キャッシュで残っているのであれば、そのまま表示されている状態です。

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

回答1件

自己解決

原因がわかりました。
フェードイン機能を別に実装していたのですが、それが影響していたようです。
外したところ現象がなくなりました。
別質問にてこの影響がなぜ発生しているのか、回避する方法について質問します。

jquery
1//fadein
2$(function(){
3	$(window).scroll(function (){
4		$('.fadein').each(function(){
5			var elemPos = $(this).offset().top;
6			var scroll = $(window).scrollTop();
7			var windowHeight = $(window).height();
8			if (scroll > elemPos - windowHeight + 200){
9				$(this).addClass('scrollin');
10			}
11		});
12	});
13});