IOS 사파리 min-height: 100vh 스크롤 버그

컨테이너의 최소 높이를 화면에 채우기위해서 100vh 사용시,

ios 사파리에서는 주소표시줄과 툴바 때문에 스크롤시 덜컥거리는 이슈가 있다.

이를 해결하기 위해서 웹킷에서 제공하는 값을 100vh 대신 -webkit-fill-available 값을 사용 할 수 있다.

 

.wrap {
	min-height: 100vh;
}

/*
	여기서 100vh를 -webkit-fill-available 값으로 대체하여 사용 할 수 있다.
*/

.wrap {
	min-height: -webkit-fill-available;
}

 

이 값은 calc 함수 내에서 사용 할 수 없습니다.