웹앱 iOS에서 100vh 쓸 때 생기는 스크롤 문제 정리

회사에서 웹앱 작업하면서 겪은 경험을 공유하려고 한다.

문제 상황

• PC에서 테스트시에 정상: 100vh로 세팅하면 화면 꽉 차게 잘 나옴
• iOS 문제: 100vh를 썼는데 화면에 의도치 않은 스크롤이 계속 생김
• 인터넷 찾아보니까 -webkit-fill-available, svh, lvh 같은 속성들을 쓰면 된다길래 하나씩 테스트해봄

시도했던 방법들

1. height: calc(var(--vh, 1vh) * 100);

JS로 뷰포트 높이를 계산해서 CSS 변수로 넣는 방식.

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

2. height: -webkit-fill-available;

Safari 전용 속성.
말 그대로 "사용 가능한 공간을 꽉 채워라"라는 의미.
이거 추가하니까 확실히 개선됨.

3. min-height: 100svh;

svh = small viewport height
→ 주소창이 펼쳐진 상태의 최소 높이

4. max-height: 100lvh;

lvh = large viewport height
→ 주소창이 접힌 상태의 최대 높이

최종 적용한 조합

결국 이렇게 네 가지를 다 같이 쓰니까 완벽하게 해결됐다 🤡

.app {
  /* fallback */
  height: calc(var(--vh, 1vh) * 100);
  /* Safari 전용 */
  height: -webkit-fill-available;
  /* 최신 표준 */
  min-height: 100svh;
  max-height: 100lvh;
}

결론

• iOS Safari에서 100vh는 믿을 수 없다...
• svh, lvh, dvh 같은 최신 단위를 쓰는 게 제일 깔끔히 해결된다.
• 구버전 iOS까지 고려해야 한다면 -webkit-fill-available이나 JS fallback도 같이 넣는 게 안전하다.

  그래서 난 네 가지를 다 넣는 조합으로 마무리했다.✌️