iOS Safari 100vh 관련 이슈

date

Feb 1, 2024

slug

safari-100vh-issue

author

status

Public

해결 방법

1. -webkit-fill-available사용 (단순 해결)


height: -webkit-fill-available;

기능 쿼리(@supports) 인자에 명시한 -webkit-touch-callout은 iOS에서만 지원하는 속성입니다. 따라서 아이폰 사파리에서 접속할 땐 -webkit-fill-available 스타일 값이 적용됩니다.

fill-available : 요소의 width / height를 지정할 때 사용하는 값으로 부모 요소(컨테이너)에서 사용할 수 있는 모든 공간을 차지(fill)하도록 확장됩니다. stretch 개념과 비슷합니다. *앞에 -webkit 접두사를 붙이면 사파리에서만 작동합니다.

@supports(...) {...} : 기능 쿼리라고 부르며 인자에 명시한 CSS 속성을 지원할 때와, 지원하지 않을 때의 스타일을 지정할 수 있습니다.

-webkit-touch-callout : iOS에서 터치 / 롱터치를 제어하는 속성

tailwindCSS를 사용하는 경우 h-screen이 100vh이기에 아래와 같이 수정하면 됩니다.



@supports (-webkit-touch-callout: none) {
	.h-screen {
		height: -webkit-fill-available;
	}

	.min-h-screen {
		min-height: -webkit-fill-available;
	}

	.max-h-screen {
		max-height: -webkit-fill-available;
	}
}

장점

iOS Safari에서 동적으로 뷰포트 높이를 계산

주소창이 보이거나 숨겨질 때 자동으로 조정

더 간단한 구현

단점

Safari와 iOS 기기에서만 작동하는 비표준 속성

크로스 브라우저 호환성 문제 발생 가능

일부 오래된 브라우저에서 지원하지 않음

2. h-full 방식을 사용 (가장 추천)

위의 h-screen + -webkit-fill-available의 경우 다른 브라우저에서 일관된 동작을 보장하는 속성이 아닙니다.

절대적으로 위치를 지정하는 것이기에 부모 요소에 상대적으로 높이를 지정하는 방식인 h-full을 사용하는 것을 추천합니다.

3. calc() 사용

장점

모든 브라우저에서 지원

정확한 수치 계산 가능

더 예측 가능한 결과

단점

주소창 높이가 기기나 브라우저마다 다를 수 있어 정확한 값 설정이 어려움

동적인 변화에 대응하기 어려움

추가 계산이 필요한 경우 복잡해질 수 있음

calc()보다는 -webkit-fill-available을 사용하는 것이 더 낫습니다.

모바일 Safari의 동적인 주소창 동작에 더 잘 대응

구현이 간단하고 유지보수가 쉬움

최신 브라우저들의 지원이 점점 늘어나는 추세

출처: https://ben.page/tailwind-h-screen