非表示のはずのドロワーメニューがページ更新の瞬間に出現する現象を解消したい

前提

・現在、大学研究室のwebsiteを作成しています。
・専門ではなく、1か月程度勉強した程度の知識量です。
・website作成・更新の引継ぎを考慮して煩雑なコードは書かないようにしており、基本的にhtmlとcssのみで書くようにしています。
・とあるサイトのコードをベースにしてドロワーメニューを作りました。
・ドロワーメニューを押すと右からドロワーが少し開いて、ドロワー以外の部分をクリックすると閉じるような仕様です。

発生している問題・エラーメッセージ

ページを開いた瞬間やページを更新する瞬間に、非表示のはずのドロワーメニューが現れます。
すぐに右側に逸れて見えなくなり、ドロワーメニューの機能上は問題ないのですが、
すべてのページに共通のドロワーメニューを使用するため、やや鬱陶しい状態です。
この現象をどうにか解消できないでしょうか。

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>test</title>
6<link href="test-style.css" rel="stylesheet" type="text/css">
7</head>
8
9<body>
10	<div id="nav-drawer">
11      <input id="nav-input" type="checkbox" class="nav-unshown">
12      <label id="nav-open" for="nav-input"><span></span></label>
13      <label id="nav-close" for="nav-input" class="nav-unshown"></label>
14      <div id="nav-content">
15		 <div class="drawer-text">
16		 <li><a href="news.html">News</a></li>
17		 <li><a href="about.html">About</a></li>
18		 <li><a href="members.html">Members</a></li>
19		 <li><a href="researches.html">Researches</a></li>
20		 <li><a href="works.html">Works</a></li>
21		 <li><a href="lectures.html">Lectures</a></li>
22		 </div>
23	 </div>
24  	</div>
25</body>
26</html>
27

css
1@charset "utf-8";
2/* CSS Document */
3
4.logo {
5	width: 100px;
6	margin: 14px 0 0 3%;
7}
8#top {
9	display: flex;
10	align-items: center;
11}
12#top-name {
13	font-size: 2rem;
14	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
15	margin-left: 30px;
16	margin-top: 10px;	
17}
18.main-nav {
19	display: flex;
20	font-size: 1.25rem;
21	margin-top: 34px;
22	list-style: none;	
23}
24.main-nav li {
25	margin-left: 36px;
26}
27.main-nav a {
28	color: black;
29}
30.main-nav a:hover {
31	font-weight: bolder;
32}
33.wrapper {
34	max-width: 1250px;
35	margin: auto;
36	padding:  0 4px ;
37}
38.page-header {
39	display: flex;
40	justify-content: space-between;
41	margin-top: 50px;
42}
43
44
45/*ドロワーメニューボタン*/
46#nav-drawer {
47  position: relative;
48  text-align: right;
49  padding-left: 50px;
50}
51
52/*チェックボックス等は非表示に*/
53.nav-unshown {
54  display:none;
55}
56
57/*アイコンのスペース*/
58#nav-open {
59  display: inline-block;
60  width: 30px;
61  height: 22px;
62  vertical-align: middle;
63}
64
65/*ハンバーガーアイコンをCSSだけで表現*/
66#nav-open span, #nav-open span:before, #nav-open span:after {
67  position: absolute;
68  height: 2px;/*線の太さ*/
69  width: 25px;/*長さ*/
70  border-radius: 3px;
71  background: #000000;
72  display: block;
73  content: '';
74  cursor: pointer;
75}
76#nav-open span:before {
77  bottom: -8px;
78}
79#nav-open span:after {
80  bottom: -16px;
81}
82#nav-open span:hover {
83	height: 4px;
84}
85#nav-open span:hover:after {
86	height: 4px;
87}
88#nav-open span:hover:before {
89	height: 4px;
90}
91
92
93/*閉じる用の薄黒カバー*/
94#nav-close {
95  display: none;/*はじめは隠しておく*/
96  position: fixed;
97  z-index: 99;
98  top: 0;/*全体に広がるように*/
99  left: 0;
100  width: 100%;
101  height: 100%;
102  background: black;
103  opacity: 0;
104  transition: .3s ease-in-out;
105}
106
107/*中身*/
108#nav-content {
109  overflow: auto;
110  position: fixed;
111  top: 0;
112  right: 0;
113  z-index: 9999;/*最前面に*/
114  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
115  max-width: 330px;/*最大幅（調整してください）*/
116  height: 100%;
117  background: antiquewhite;/*背景色*/
118  transition: .3s ease-in-out;/*滑らかに表示*/
119  -webkit-transform: translateX(100%);
120  transform: translateX(100%);/*左に隠しておく*/
121}
122
123.drawer-text {
124	text-align: center;
125	margin-top: 120%;
126	
127}
128
129/*チェックが入ったらもろもろ表示*/
130#nav-input:checked ~ #nav-close {
131  display: block;/*カバーを表示*/
132  opacity: .1;
133}
134
135#nav-input:checked ~ #nav-content {
136  -webkit-transform: translateX(0%);
137  transform: translateX(0%);/*中身を表示（右へスライド）*/
138  box-shadow: 6px 0 25px rgba(0,0,0,.15);
139}
140
141

補足情報（FW/ツールのバージョンなど）

Chrome、edge、Vivaldiのブラウザではこの現象が起こり、
Firefoxではこの現象は見られなかったです。

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

回答2件

ベストアンサー

Chromeでは再現せず、Edgeでは再現した。
preload処理をしても効果はない。

原因は、IDにnav-contentが設定されたdiv要素のスタイルにtransition: .3s ease-in-out;が設定されていることなので、これを削除すればいい。

投稿2020/09/25 23:57

Daregada

総合スコア11990

kuma_kuma_

2020/09/26 00:05

すみませんこちらのEdge環境ですと再現できなかったのですが良ければ環境を教えてもらえますか？確認ブラウザ・Windows10版Edge(chrome系) ・Windows7版Edge(chrome系)

Daregada

2020/09/26 01:23

Windows 10 64bit バージョン情報 Microsoft Edge バージョン 85.0.564.63 (公式ビルド) (64 ビット) このブラウザーは、Chromium オープンソースプロジェクトおよび他のオープンソースソフトウェアに基づいて機能します。

kuma_kuma_

2020/09/26 01:30

情報ありがとうございます。・Windows10版Edge(chrome系)　バージョン 85.0.564.63 (公式ビルド) (64 ビット) ・Windows7版Edge(chrome系) バージョン 85.0.564.63 (公式ビルド) (64 ビット) やはりこちらの環境では再現できませんでした。

Daregada

2020/09/26 01:42

F5キーで更新したときに、ドロワーメニューが表示される。 transitionの秒数を増やせば確認は容易。そちらの環境で再現されない原因はわからない。拡張機能などの影響があるだろう。こちらは、(メインでEdgeを使っていないので)何も入れていない状態。

kuma_kuma_

2020/09/26 01:47

追加情報ありがとうございます。こちらもピュアな状態のEdgeで確認したのですが確認時のtransitionの設定が甘かったのかもしれません。貴重な情報ありがとうございます。

harupaka

2020/09/29 13:36

ご回答ありがとうございます。ドロワーを引き出すような動作はなくなりましたが、transitionプロパティを削除することで問題を解消することができました。ありがとうございました。

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

こちらの環境では再現することができませんでした。
その為可能性ですがCSSファイルが読み込まれる前の描写が入っている事です。
先読みを試してみて下さい。

html
1<link rel="preload" href="test-style.css" as="style">
2<link href="test-style.css" rel="stylesheet" type="text/css">

投稿2020/09/25 21:00

編集2020/09/26 00:08

kuma_kuma_

総合スコア2506

harupaka

2020/09/29 13:39

ご回答ありがとうございます。上記を試み、解決できませんでしたが、rel=preloadがあることを学習できたのでためになりました。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！