ios 사파리 100vh 오류 해결

문제

ios 환경에서 사파리에서 100vh를 주면 위의 사진과 같이 주소창이 아래쪽을 가리게 되는데, 그 부분도 포함해서 100vh로 인식하기 때문에 주소창이 가리고 있는 아랫부분에 무언가를 띄우려고 할 경우 문제가 된다.(애초에 원하는 콘텐츠를 다 보여줄 수 없기 때문에 수정이 필요해짐)

해결

의외로 해결방법은 간단하다

min-height: 100vh;
@supports (-webkit-appearance:none) and (stroke-color: transparent) {
  min-height: -webkit-fill-available;
}

해당 옵션을 추가해주면 원하는 100vh를 사파리에서 먹일 수 있게 되고, 구글 크롬으로 테스트할 때에도 오류가 나지 않는다.