실제로 작동하는 iOS Safari Full-Height Video Fix (작동하지 않는 것을 4시간 시도한 뒤)

Source: Dev.to

The problem

iOS Safari에서 전체 화면 히어로 비디오를 구현하려고 시도해 본 적이 있다면, 실제로 문제를 해결하지 못하는 같은 조언들을 몇 시간씩 읽었을 가능성이 높습니다. 비디오 하단이 잘리거나, 빈 공간이 생기거나, 화면 아래쪽 내용이 Safari 툴바 뒤에 가려지는 경우가 있습니다.

What the internet tells you to try

• 100vh – 너무 높음. Safari는 툴바가 숨겨진 상태의 뷰포트를 기준으로 계산하므로 사용자가 실제로 보는 화면과 다릅니다.
• 100svh – “small viewport height”라 불리며 이 문제를 해결한다고 하지만, 신뢰성 있게 동작하지 않습니다.
• 100dvh – “dynamic viewport height”로 툴바가 보이거나 숨겨질 때 업데이트됩니다. 레이아웃이 흔들리고 여전히 문제를 해결하지 못합니다.
• 100lvh – “large viewport height”. 조금은 나아지지만 큰 iPhone에서는 여전히 부족합니다.
• -webkit-fill-available – WebKit에서만 동작하고 Chrome에서는 깨지며, 중첩될 경우 실패합니다.
• window.innerHeight를 이용한 JavaScript 솔루션 – innerHeight는 현재 보이는(짧은) 높이를 반환하므로 처음과 같은 상황에 머무릅니다.
• env(safe-area-inset-bottom)와 viewport-fit=cover – 노치와 홈 바에서 콘텐츠를 떨어뜨리는 데는 유용하지만, 근본적인 높이 문제는 해결하지 못합니다.

이 모든 방법을 여러 번 조합하고 반복했지만, 높은 기기에서는 비디오가 여전히 짧게 표시되었습니다.

What actually worked

/* hero.css */
.hero {
  min-height: calc(100lvh + 60px);
}

히어로를 의도적으로 더 크게 만들고, 하단에 정렬된 요소들의 위치를 조정합니다(예: 모바일에서는 bottom: 15%를 bottom: 25%로 변경)하여 초기 로드 시 보이는 영역 안에 편안히 들어가도록 합니다.

Conclusion

우아하지도 않고 해킹 같은 느낌이지만, 사용자는 히어로 비디오가 화면을 가득 채우는지 아니면 깨져 보이는지만 눈여겨봅니다. 약간의 여분 높이를 추가하면 비디오가 잘리지 않고, 추가된 픽셀은 단순히 스크롤을 통해 넘어가게 되므로 대부분의 사용자는 이를 전혀 인지하지 못합니다.

iOS Safari의 뷰포트 quirks에 대해 더 깔끔하고 신뢰할 수 있는 해결책을 발견하셨다면, 댓글에 공유해 주세요. 그때까지는 히어로를 조금 더 크게 만들고 콘텐츠 위치를 조정하는 것이 실용적인 방법입니다. 행운을 빕니다!