ヒーロー100dvhの着地点

ヒーローセクションの調整に時間を使って向き合った結果、それぞれのブラウザが持つ“癖”が少しずつ見えてきた。
思っていたより複雑で、でも観察していくと面白い経験だった。

現段階では、JavaScript で高さだけを扱う“最小構成” が sonohito の着地点になっている。

const applyHeight = () => {
  const h =
    window.visualViewport?.height || window.innerHeight;

  const vh = h * 0.01;

  hero.style.setProperty("--vh", `${vh}px`);
  hero.style.setProperty("height", `calc(var(--vh) * 100)`, "important");
};
.home .hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}

RELATED