🎨 CSS | [오류 해결] 모바일 브라우저에서 100vh 적용 안됨🥲

dayannne·2024년 1월 14일

🐛 문제

리액트 프로젝트 배포 후
모바일 브라우저(주로 safari)에서기본 url바와 하단바로 인해
아래 혹은 윗부분의 요소가 잘려보이는 현상이 나타나는 부분을 발견했다.

이에 대한 문제는 두가지로 나타났다.

1) 처음 페이지 렌더링 시 화면이 위쪽 요소부터 보이지 않고 중간 위치부터 잘려 보임

물론 스크롤 하면 위 요소도 잘 보이지만, 아래 부분 요소가 끝까지 스크롤 되지 않았다.

기대 화면 / 현재

2) 전체 높이가 화면보다 길어져 아래에 위치하는 요소가 더 밑에 위치하게 되면서 잘려 보임

정확히는 두 요소를 양 끝으로 display:flex flex-direction:column justify-content:space-between와 같이 상하 끝으로 배치하는 스타일을 주었을 때 항상 아래 끝 쪽에 위치하도록 설정한 요소가 화면 높이에 맞춰지지 않고 더 아래에 보이게 되는 현상

기대 화면 / 현재

🔍 원인

모바일 브라우저에서 100vh는 상단 url을 입력(Browser Top Bar)하는 영역과 하단 네비게이션(Browser Bottom Bar) 영역의 사이즈를 포함하기 때문!
ios safari 브라우저의 경우, 상단의 url바 혹은 하단의 툴바로 인해 화면의 크기(viewport)를 실제 보여지는 윈도우의 innerHeight보다 크게 잡는다.

그래서 height을 100vh로 잡아 작성하더라도 실제 safari 모바일 화면에서는 스크롤이 생길만큼 공간이 생기면서 발생하는 현상이었다.

💡해결방법

(해결X) -webkit-fill-available

body 요소의 최소 높이를 사용 가능한 뷰포트의 높이로 설정하는 속성이다.
App.js Wrap에 설정해 둔 height값을 제거하고,

body {
  min-height: 100vh;
  
  @supports (-webkit-touch-callout: none) {
    min-height: -webkit-fill-available;
  }
}

GlobalStyle 설정에서 body에 min-height을 준 다음 @supports규칙을 활용해 웹킷 브라우저(Chrome, Safari 등)에서만 -webkit-fill-available 설정을 주어 봤으나...
기본적으로 전체 요소들이 화면 높이보다 긴 페이지의 경우에는 괜찮았지만, 그렇지 않은 다른 페이지의 경우 사진처럼 딱 요소 높이에 맞게 전체 높이가 짧게 설정되면서 어떻게 해도 높이가 채워지지 않았다.