Safariのアドレスバー（タブバー）が原因によって、vhで指定した要素の高さが変わってしまう問題の対処

はじめに

vh は以下のように要素の高さを指定することで、ユーザが使用するデバイスのビューポートに応じて、動的に指定した要素の高さを変更することが出来ます。

.container {
    height: 50vh;
}

ただここに問題があり、Safariのアドレスバー（タブバー）が出現するとビューポートが変更されたとみなされ要素の高さが変わってしまいます。

これではアドレスバーの表示、非表示が繰り返される度に、要素の高さが変わってしまい、画面がガクガクとなることで体験が非常に悪くなります。

対処することが出来たので、この記事では対処法を共有したいと思います。

対処法の紹介

対処法は難しくありません。

まず、以下のコードをガクガクとなってしまっているコンポーネントに追加します。

useEffect(() => {
    const setVH = () => {
      const vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty("--app-vh", `${vh}px`);
    };

    setVH();
  }, []);

こちらのコードでは、コンポーネントがマウントされた時に一度だけsetVH という関数を定義して呼び出しています。

そしてsetVH ではユーザのデバイスの高さを取得して、それを基にCSS変数を設定しています。

CSSファイルでは以下のように設定されたCSS変数を呼び出して利用します。

.container {
    /* height: 50vh; と指定していた場合 */
    height: calc(50 * var(--app-vh, 1vh));
}

これによって、コンポーネントの高さがアドレスバーに影響されなくなりました。

終わりに

読んでいただいた方の参考になれば幸いです。