🚨 문제 상황

Detail 페이지의 배경 이미지 영역에 대한 스타일을 적용한 아래와 적용한 후 배포하였습니다.

height: calc(100vh - $headerHeight)

이는 PC 및 대부분의 브라우저에서는 정상적으로 작동하였으나
iOS Safari 앱, 삼성 인터넷 앱 브라우저 등에서는 스크롤이 발생하는 문제를 발견하였습니다.

🔍원인

100vh는 전제 뷰포트 높이를 의미하지만
모바일 Safari 및 일부 모바일 브라우저에서는 주소창, 하단 바 등 UI 요소 영역까지 포함하여 계산
→ 이로 인해 실제 화면보다 더 큰 높이가 적용되고 다른 브라우저와 달리 불필요한 스크롤이 발생하는 것이라는 것을 알 수 있었습니다.

✅ 해결방법

CSS단위를 기존의 vh에서 dvh로 변경하였습니다.

✨dvh(Dynamic Viewport Height)

: css에 새로 추가된 동적 뷰포트 높이 단위로
주소창이 보이거나 숨겨질 때마다 실시간으로 계산 값이 변경

📋 결론

모바일 환경에서는 vh 단위가 브라우저 UI에 영향을 받아 브라우저마다 다르게 적용될 수 있으므로 dvh를 적용하여 모바일 화면에 대응해야하는 것을 알 수 있었습니다.