スマホのsafariとchromeで、メインビジュアルをビューポートいっぱいに表示したい。

解決したいこと

メインビジュアルを、スマホでビューポートいっぱいに表示したいです。
safari、chromeで正常に表示したいのですが、意図した挙動にならず困っています。
以下、検証した内容と私なりの考えをまとめます。
何かいい方法がないか、ご教授いただけたら幸いです。

※検証デバイス：iPhone11

以下、メインビジュアルの親要素に対して当てたCSSとその結果を書きます。

safariでの検証

height: 100vh;

要素がメニューバーに隠れてしまいます。

height: 100svh;

メニューバーを含めない高さに合わせてくれているので、意図した挙動となります。
スクロールしても問題なさそうです。

chromeでの検証

問題はこちらです。

height: 100vh;

height: 100svh;

height: 100lvh;

height: 100dvh;

どのCSSを当てても、メニューバーを含めない高さに合わせてくれます。
ただ、下にスクロールすると、メニューバーが非表示になるタイミングで要素の高さが変わってしまいます。

検証結果から

safariは、svhなどの新しい単位で問題なく対応できるのですが、chromeではメニューバーの有無で高さが変わってしまうみたいです。
最低でもsafariとchromeでは、意図した挙動にしたく思っているので、解決策があれば教えていただきたいです。