木+木+木=森

できるだけ言葉にする

overflow

ヘッダー部分のpaddingをコメントアウトしたところ、ハンバーガーメニューをクリックすると現れるはずのメニューが途中で切れてしまう

しかも検証のスマホ画面では表示されてるのに〜謎

理屈はよく分からないけど同じ要素にposition: fixed;とoverflow: auto;を指定しているのが原因らしい(しかもiphoneだけ)

結局ヘッダーに指定していた↓を削除すると、表示されるようになった

overflow:auto;
-webkit-overflow-scrolling:touch;

まずどこが原因なのか突き止めるまでに時間がかかって疲れた

https://shanabrian.com/web/html-css-js-technics/css-ios-safari-02.php

 

追記

overflowを消すとメニューがスクロールできなくなったのでpaddingを戻した

1pxだと消えてしまうのに2pxでは問題なく表示される

ますます謎は深まるばかりであった