色々と問題が多くて大変でした。
PCでは問題なく動いていたため、iPhone実機で確認した際に気がつきました。
Android端末では動作確認ができていないため、他にも表示の不具合があるかもしれません。
お気づきの際は教えていただけると助かります。
以下メモ
① overflow: auto の中で position: fixed が壊れる普通のブラウザなら position: fixed は常にviewport基準で固定されるはずなのに、
iOSだと overflow: auto/scroll の親があると「その親の中」で動いてしまう。
.menu-box に overflow-x: auto（横スクロール用）があった。
iOS Safariには「overflow: auto の中にある position: fixed は
viewportじゃなくてその親要素基準で動く」というバグがある。
なのでドロップダウンが画面に固定されず、
overflow コンテナの外に出たところで、はみ出た部分が切り取られて見えなくなっていた。
→ 解決策： ドロップダウンを<body> 直下に動的に生成することで、overflow の外に出した。② <label> 要素のクリックイベントが発火しないチェックボックストグルの仕組みで使っていた <label> が、
iOSではインタラクティブ扱いされないことがある。
onclick="" を付けるハックで回避できることもあるが不安定。
→ 解決策： <label> → <button> に変えた。<button> はiOSが「インタラクティブ要素」と認識するので確実にクリックが発火する。
<label> はフォーム要素と関連付けられていない場合、iOSでは「ただのテキスト」扱いになることがある。
③ <summary> に display: block/flex を設定するとトグルが壊れる<summary>は本来 display: list-item という特殊な表示形式になってる。
それを block や flex で上書きすると、Safariが「開閉機能のある要素」として認識するのをやめてしまう。
ChromeやFirefoxは多少上書きしても大丈夫なことが多いんだけど、Safariだけ厳格。
→ 解決策：<button> + JS でトグルにして <details> を使わないことにした。#CSS
