PC ブラウザとモバイルブラウザで svh の挙動が違う気がするので調べる

あるサイトを作っている際に、Android Chrome では表示が崩れるという現象が起きた。

フルページスクロールのサイトなのだが、挙動としてはブラウザバーが縮小する時に前のページ（セクション）が見切れるというのだ。

これってどういうことなのだろう、と調べた時に PC ブラウザとモバイルブラウザの svh の挙動が違いそうだったのでメモしておく。

そもそもこのバグが起きたのは PC ブラウザで開発をしていたからで、PC ブラウザではブラウザバーが引っ込んでもいい感じに要素の高さがリサイズさせられた。

ちなみにうろ覚えだけど LINE ブラウザ（Android）もブラウザバーが引っ込むのだけど、それも問題なく動いていたはず。

しかし Android Chrome だけは元のサイズ（ブラウザバーありきのサイズ）のままなので、ブラウザバーが引っ込むと前のページがちょっと見えてしまうという。

最初に思いつくのは「dvh にするのが正しいのでは」なのだが、dvh だと何か別の挙動で困ることがあった気がした（忘れた）

そのサイトでは最後のページだけがフルページスクロールじゃないので、dvh にすると困るからだった。
最後のページは親要素だけを 100dvh にして、子要素で overflow: scroll にすることを次に考えたんだけど、子要素を大きく下から上へスワイプするとなぜか親要素ごと動いて前のページが見えてしまう...