iOS Safari 100vh 관련 이슈
#iOS
여기 100vh로 높이를 잡아둔 SideBar가 있습니다. (TailwindCSS의 h-screen 적용된 상태)
이때 Safari에서 로그아웃 버튼이 보이지 않는 이슈가 발생했습니다.
⇒ iOS Safari에서는 하단 주소창 영역을 포함해 100vh로 취급합니다!
하단에 요소를 배치하면 가려서 안보일 수 있습니다.
해결 방법
1. -webkit-fill-available사용 (단순 해결)
javascript
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이기에 아래와 같이 수정하면 됩니다.
css
1
2@supports (-webkit-touch-callout: none) {
3 .h-screen {
4 height: -webkit-fill-available;
5 }
6
7 .min-h-screen {
8 min-height: -webkit-fill-available;
9 }
10
11 .max-h-screen {
12 max-height: -webkit-fill-available;
13 }
14}
15장점
단점
2. h-full 방식을 사용 (가장 추천)
위의 h-screen + -webkit-fill-available의 경우 다른 브라우저에서 일관된 동작을 보장하는 속성이 아닙니다.
절대적으로 위치를 지정하는 것이기에 부모 요소에 상대적으로 높이를 지정하는 방식인 h-full을 사용하는 것을 추천합니다.
3. calc() 사용
장점
단점
calc()보다는 -webkit-fill-available을 사용하는 것이 더 낫습니다.