スマホブラウザのスクロールでアドレスバーが揺れる仕様に悩まされた話

症状

• モーダルの左上の×ボタンがアドレスバー背面に隠れて、バツボタンが押せなくなった。
• スクロール中にUIが縮み始めた瞬間に再現しやすい。
  
  サンプルとして Zenn のページを使っています（本記事の内容とは関係ありません）
  
  サンプルとして Zenn のページを使っています（本記事の内容とは関係ありません）

原因

• 100vh を基準にしていたため、スクロールに伴うUIの伸縮でページの基準高さが揺れた。
• その揺れと、モーダルのフェード/スライドのタイミングが噛み合わず、×ボタンがノッチ下へ潜り込むことがあった。

解決

• ページ全体を height: 100svh; で固定することで、アドレスバーを常時表示させることができた。
• これにより×ボタンがアドレスバーの背面に隠れることはなくなった。（ハック的ではあるが）

※今回のアプリはゲーム寄りのUIだったため、ブラウザの「アドレスバーを縮めてコンテンツを広げる」という仕様はあまり意味がなく、このアプローチでも問題なかった。

サンプルとして Zenn のページを使っています（本記事の内容とは関係ありません）