IOS safari 하단 주소창과 css fixed | 높이값 인식 문제

관련 문제로 일주일을 고심한 적이 있었는데, 구체적인 상황은 아래와 같았습니다.

하단 주소창이 없는 상태에서 버튼을 눌러 css fixed를 활용하여 전체 화면을 꽉 채우는 모달(이하 풀 모달)을 띄웠을 때

하단 주소창이 나오거나 전체 높이 값을 제대로 인식 못 했습니다.

원인:
버튼을 눌러 css fixed 처리시 scroll 이벤트가 발생하여 하단 주소창 발생

해결 방안 :
html 높이값을 window.innerHeight 보다 높게 주기

구체적은 방법 :
##1. resize 이벤트로 window.innerHeight 보다 높게해서 :root의 css custom variable에 저장하기(IOS version 때문인지, 아니면 아이폰 기기 마다 다른 viewport 높이 때문인지 분기하여 해당 값을 조절했어요.)
##2. html 높이값에 해당 custom variable을 적용.
##3. 풀 모달 있는 상태에서 touchmove시 보이지 않지만 내부적인 메커니즘으로 바운스 동작이 발생할 경우 잠깐 동안 스크롤 되지 않는 현상을 방지하기 위해 iNObounce.js 활용하여 바운스 행위를 방지(https://github.com/lazd/iNoBounce)