🦁

慣性スクロール(Lenis)+100dvh+iphoneでハマった事

に公開
CSS
iPhone
CSS 3
lenis
tech

ハマる理由

iphoneはvhかsvhが妥当な指定。
dvhで指定すると変な大きさになり、スクロールしてるとどこかにジャンプしてしまう。
おそらくlenisの現在位置の計算がおかしくなってる。

でもandroidはdvhじゃないと、表示がおかしくなってしまう。

cssだけで対応できなかったので、jsで対応する。

対処法

<script is:inline>
  const isAndroid = /Android/i.test(navigator.userAgent);
  if (isAndroid) document.documentElement.classList.add('is-android');
</script>

こうやって、androidのときには、htmlに[is-android]クラスを付与する。

  html,
  body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
  }

  :global(.is-android) {
    height: 100dvh;
    body {
      height: 100dvh;
    }
  }

こうしてis-android以下では、dvh処理して◎

Discussion