ハンバーガーメニューの背景を固定したい

レスポンシブで書いているソースのスマホ専用メニューが表示されたときに、スクロールの動きが鈍く、また背景も動いてしまうため、直したいです。

こんにちは、HTMLとCSSの初心者です。
ネット販売用のレスポンシブメニュを作っています。
ベースはテンプレートを使っているのですが、幅640px以下になったときにハンバーガーメニューが出て、タップするとスマホ用のメニューが表示されるようにしています。

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

メニューはきちんと出るのですが、スマホで見たときにフリックしてもスクロールする動きがスムーズでなく、また、メニューで隠れている背景が動いてしまいます。

該当のソースコード

HTML
1<div class="header-layout">
2      <div class="title"><a href="https://shopping.geocities.jp/"><img src="img/logo.jpg" alt="OFF" width="100%" /></a></div>
3      <a class="menu-trigger" href="javascript:;"><span></span><span></span><span></span></a>
4      <div class="navi">
5        <ul>
6          <li><a href="#"><img src="img/plane.png"> BRAND</a>
7            <ul>
8              <li><a href="https://"><img src="img/logo50x50_aj.png" alt=""/></a></li>
9              <li><a href="https://"><img src="img/logo50x50_bv.png" alt="text"/></a></li>
10              <li><a href="https://"><img src="img/logo50x50_bb.png" alt=""/></a></li>
11              <li><a href="https://"><img src="img/logo50x50_co.png" alt=""/></a></li>
12			  <li><a href="https://"><img src="img/logo50x50_ch.png" alt=""/></a></li>
13			  <li><a href="https://"><img src="img/logo50x50_ck.png" alt=""/></a></li>
14              <li><a href="https://"><img src="img/logo50x50_ds.png" alt=""/></a></li>
15              <li><a href="https://"><img src="img/logo50x50_dg.png" alt=""/></a></li>
16              <li><a href="https://"><img src="img/logo50x50_ea.png" alt=""/></a></li>
17              <li><a href="https://"><img src="img/logo50x50_sf.png" alt=""/></a></li>
18              <li><a href="https://"><img src="img/logo50x50_fe.png" alt=""/></a></li>
19              <li><a href="https://"><img src="img/logo50x50_fr.png" alt=""/></a></li>
20			  <li><a href="https://"><img src="img/logo50x50_gu.png" alt="text"/></a></li>
21              <li><a href="https://"><img src="img/logo50x50_jc.png" alt=""/></a></li>
22              <li><a href="https://"><img src="img/logo50x50_ks.png" alt=""/></a></li>
23              <li><a href="https://"><img src="img/logo50x50_ls.png" alt=""/></a></li>
24			  <li><a href="https://"><img src="img/logo50x50_mk.png" alt=""/></a></li>
25              <li><a href="https://"><img src="img/logo50x50_mcm.png" alt=""/></a></li>
26              <li><a href="https://"><img src="img/logo50x50_pc.png" alt=""/></a></li>
27              <li><a href="https://"><img src="img/logo50x50_ps.png" alt="/></a></li>
28              <li><a href="https://"><img src="img/logo50x50_pd.png" alt=""/></a></li>
29              <li><a href="https://"><img src="img/logo50x50_sbc.png" alt=""/></a></li>
30              <li><a href="https://"><img src="img/logo50x50_sp.png" alt=""/></a></li>
31              <li><a href="https://"><img src="img/logo50x50_tb.png" alt=""/></a></li>
32			  <li><a href=""><img src="img/logo50x50_vvww.png" alt=""/></a></li>
33            </ul>
34          </li>
35         
36        </ul>
37      </div>
38    </div>

CSS
1@media only screen and (max-width: 640px) {
2body {
3	font-size: 90%;
4}
5.header-layout {
6	width: 96%;
7	margin-right: auto;
8	margin-left: auto;
9	position: relative;
10	margin-top: 0.5em;
11	margin-bottom: 0.5em;
12}
13.title {
14	width: 40%;
15	display: block;
16	vertical-align: middle;
17	padding: 2%;
18	border: 1px solid #FFFFFF;
19	font-family: "Lucida Console", Monaco, monospace;
20	text-align: center;
21	font-size: 150%;
22}
23.fixed-img img {
24	width: 100%;
25}
26ul {
27	font-size: 100%;
28}
29.top-rec-img {
30	float: none;
31	clear: both;
32	width: 100%;
33	margin-bottom: 1em;
34}
35.top-rec-info {
36	float: none;
37	clear: both;
38	width: 96%;
39}
40.menu-trigger {
41	display: block;
42	position: fixed;
43	right: 5%;
44	top: 3%;
45	width: 20px;
46	height: 18px;
47}
48.menu-trigger span {
49	position: absolute;
50	left: 0;
51	width: 100%;
52	height: 2px;
53	background-color: #000;
54	border-radius: 2px;
55}
56.menu-trigger span:nth-of-type(1) {
57	top: 0;
58}
59.menu-trigger span:nth-of-type(2) {
60	top: 8px;
61}
62.menu-trigger span:nth-of-type(3) {
63	bottom: 0;
64}
65.menu-trigger.active span:nth-of-type(1) {
66	-webkit-transform: translateY(8px) rotate(-45deg);
67	transform: translateY(8px) rotate(-45deg);
68}
69.menu-trigger.active span:nth-of-type(2) {
70	opacity: 0;
71}
72.menu-trigger.active span:nth-of-type(3) {
73	-webkit-transform: translateY(-8px) rotate(45deg);
74	transform: translateY(-8px) rotate(45deg);
75}
76.wrapper {
77	width: 96%;
78}
79#side {
80	width: 100%;
81}
82.navi {
83	display: none;
84	overflow: scroll;
85	width: 100%;
86	height: 100vh;
87}
88.navi-area {
89	position: absolute;
90}
91.navi ul {
92	display: block;
93	vertical-align: middle;
94	text-align: left;
95}
96.navi li {
97	display: block;
98	vertical-align: middle;
99	padding-top: 1em;
100	padding-bottom: 0em;
101	padding-left: 0em;
102	padding-right: 0em;
103}
104.navi li ul li img {
105	width: 20px;
106	height: auto;
107	margin-right: 1%;
108	vertical-align: middle;
109}
110.navi ul a {
111	text-decoration: none;
112	padding: 2%;
113}
114.navi ul a:hover {
115	color: #cccccc;
116}
117.navi li ul li a {
118	width: 96%;
119	display: block;
120}
121.navi-area {
122	display: none;
123	width: 100%;
124	padding: 2%;
125	height: 100vh;
126	background-color: rgba(203,217,217,0.8);
127}
128.navi li ul {
129	position: relative;
130	z-index: 9999;
131	top: 100%;
132	left: 0;
133	width: 96%;
134	padding: 2%;
135	background-color: #FFFFFF;
136	display: block;
137	overflow: hidden;
138	-moz-transition: .2s;
139	-webkit-transition: .2s;
140	-o-transition: .2s;
141	-ms-transition: .2s;
142	transition: .2s;
143}
144.navi li ul li {
145	display: block;
146	float: none;
147	padding: 0;
148	margin: 0;
149	width: auto;
150	margin-bottom: 1em;
151}
152.navi li:hover ul {
153	overflow: visible;
154	display: block;
155}
156.last {
157	margin-bottom: 100px;
158}
159.side-area {
160	float: none;
161	clear: both;
162	width: 100%;
163}
164.main-area {
165	float: none;
166	clear: both;
167	width: 100%;
168}
169.center-layout {
170	width: 100%;
171	margin-right: auto;
172	margin-left: auto;
173	text-align: left;
174}
175.middle-area {
176	width: 96%;
177}
178.middle-area h2 {
179	padding: 0;
180	padding-top: 1em;
181	padding-bottom: 1em;
182	font-size: 150%;
183}
184.mv-area {
185	font-size: 70%;
186}
187.search-layout {
188	width: 90%;
189	margin-right: auto;
190	margin-left: auto;
191}
192.search-postage {
193	padding-top: 1%;
194}
195.search-postage form {
196	width: 100%;
197	float: none;
198	clear: both;
199}
200.search-postage p {
201	float: none;
202	clear: both;
203	width: 100%;
204	line-height: auto;
205}
206.search-postage input {
207	width: 40%;
208	padding: 7px;
209	margin-left: 1em;
210	border: none;
211}
212.searchbutton input {
213	border-radius: 7px;
214	padding-left: 1em;
215	padding-right: 1em;
216	background-color: #333333;
217	color: #FFFFFF;
218}
219.footer {
220	font-size: 120%;
221}
222.footer li {
223	border-bottom: 1px dotted #eeeeee;
224}
225.footer-left {
226	float: none;
227	clear: both;
228	width: 96%;
229	padding: 2%;
230}
231.footer-left img {
232}
233.footer-center {
234	float: none;
235	clear: both;
236	width: 96%;
237	padding: 2%;
238}
239.footer-right {
240	float: none;
241	clear: both;
242	width: 96%;
243	padding: 2%;
244}
245.page-items img {
246	width: 96%;
247	padding: 2%;
248}
249iframe {
250	width: 100%;
251}
252}
253

試したこと

overflow-y: scroll;
-webkit-overflow-scrolling:touch;

を適切と思われる場所に張り付けてはみたのですが、うまくいきませんでした。

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

Dwの最新版を使っています。

m.ts10806

2018/07/20 03:53

質問編集画面タイトル横にある「初心者アイコン」をご活用ください。「初心者」と質問で書くよりも伝わりますし、質問一覧に表示されるのでわかりやすくなります。

FKM

2018/07/20 05:05

liタグの下から6行目のダブルクォートが抜け落ちてるのは関係ないですよね？

dreamliner1977

2018/07/20 05:10

こんにちは。ご回答ありがとうございます。そこは転記したときにaltの中身を削除したときに一緒に落ちたものでした。いろいろ調べていはいるのですが、HTMLよりもCSSの方にきっと何か加えないといけないのかなぁと考えています。PCの方は全く問題なく動いていて、スマホメニューを表示した時のみ挙動がおかしいです。PCで作業しながらクロムで見ていると、問題なく動いていますが、実際にアップロードしてiPhoneでみるとヘンテコなってしまいます。

FKM

2018/07/20 05:28

適当に画像はめ込んで、iPhoneで動作テストした限りはスムーズに動いていますが、logo50x50_xx.pngの画像サイズはどうなってますか？

dreamliner1977

2018/07/20 05:35

PCのメニューと共通で、同じものを読み込んでいます。サイズも50x50で大きいもので4KBくらいとなっています。iPhoneでみたときに左側にメニューがならんでそれをフリックすると動きはするのですが、いまい、いまいち動きが鈍いというか反応がいまいちで、並んだメニュの右側（スマホの右半分くらいが空白になりますが）をフリックしたときに、下にすこし透けて見えている通常のページそのものがスクロールしてしまい、スマホメニューはときおりしか反応してくれない、、、そんな感じになってしまいます。

FKM

2018/07/20 06:08

plane.pngのサイズはどうなっていますか？あとCSSのpositionプロパティでfixedを指定した場合、色々スクロールできない、画像がはみ出るなどの問題が出るみたいですね。ここではリンク貼れないですけど色々参考になりそうなページがあります。

dreamliner1977

2018/07/20 06:16

チェックいただきありがとうございます。25ｘ29pxで1KBです。ハンバーガーをタップしすると、Planeのアイコンの右に「BRAND」と表示されその下に、50*50のロゴとテキストが並んで、iPhoneXで見たときに画面の半分くらいまでに収まるようになっています。動かないわけではないですが、ちょうど錆びたドアのようにフリックしたときにスルスルと動いてくれません。でも、確認いただいたら問題なく動いているとおっしゃらていたの、どこがダメなのかいろんなサイトを見てはいるのですが、自分にはハードルが高いですね（(-_-;)）

dreamliner1977

2018/07/20 06:23

ちなみにハンバーガータップ→そこがよくある「×」に代わり、、スマホ用のメニューが表示さます。スマホメニューがスムーズに動かない代わりに、よく見ると画面の右端に時折スクロールバーが出現し、それが出ているときは、本来の画面がスクロールしてしまう現象になっています。

FKM

2018/07/20 07:01

環境を再現できました。そして、Chromeの開発ツールで検証した仮説を回答に記述しておきます。