[크로스브라우징] safari fixed bug - 키보드 오픈 시

* 해당 문서는 vuejs를 기반으로 작성되었습니다. *

 

safari는 항상 예상치 못한 곳에서 버그가 발생합니다.. 🥲

간단한 수정 요청이였는데, 해당 버그로 시간을 많이 잡아먹었습니다..만! 그래도 해결해서 글을 작성하게 되었습니다.

 

container에 fixed bottom 0 을 설정해 둔 상태에서 키보드 오픈 시 container가 키보드 뒤로 가려지는 현상이 발생했습니다.

(코드는 핵심 코드만 약식으로 작성)

<div class="modal">
  <div class="container">
	<input type="text" />
  </div>
</div>

.modal{
	width: 100vw;
    height: 100vh;
    position: fixed;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    top: 0;
    left: 0;
    z-index: 9;
}
.container{
    width: 100%;
    height: auto;
    max-height: 700px;
    background-color: #ffffff;
    border-radius: 12px;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow-y: auto;
}

 

 

키보드 오픈하면 하단 입력창이 키보드 뒤로 가려진다.

 

근데 여기서 더 최악인건... 간헐적으로 발생하는게 문제였습니다 -__-..

그래서 해당 버그에 대해 찾아보던 중 감사하게도 비슷한 현상을 해결한 기업에서 글을 작성해주셔서 참고해서 수정했습니다.

(참고 문서는 제일 하단에 첨부)

 

키보드 오픈 유무에 따라 window.visualViewport.height 값이 변한다는 사실을 알게 되었습니다! (아직도 갈길이 먼 프론트 개발자...)

참고 문서에 작성되어 있는 스크립트 코드를 제 상황에 맞게 수정해서 사용하였습니다.

 

...
mounted(){
	function handleVisualViewportResize() {
      const currentVisualViewport = window.visualViewport.height
      const currentWindowHeight = window.innerHeight

      if (currentVisualViewport < currentWindowHeight) {
        document.querySelector('.container').style.bottom = `${
          currentWindowHeight - currentVisualViewport
        }px`
        document.querySelector('.container').style.transition =
          'bottom 0.3s ease-in-out'
      } else {
        document.querySelector('.container').style.bottom = 0
      }
    }

    window.visualViewport.onresize = handleVisualViewportResize
}
...

 

window.visualViewport 사이즈가 변경될 때, 로그를 찍어보니

버그가 발생될 때 실제 container의 height 보다 visualViewport의 height가 더 작다는 걸 발견했습니다.

발생하지 않는 경우는 두 값이 동일했습니다!

 

아마 디바이스 height에서 키보드 높이가 빠진 값이지 않을까.. 뇌피셜입니다!

 

그래서 visualViewport의 height가 contianer의 height보다 작을 때 두 값의 차이만큼 container bottom을 설정해주는 방식으로 버그를 해결했습니다.

 

 

수정 완료 후 결과.

 

수정 이후 문제점은 window.visualViewport.onresize가 실행되는 시점이 키보드가 완전히 오픈되거나, 완전히 히든된 후에 실행되게 설정되어있어서 container의 위치 설정이 한박자 늦게 되는 부분이 문제점인데 이 부분은 아직 해결하지 못했네요....

 

혹시 더 좋은 해결법 알려주시거나 제가 사용한 방법에 대해 지적해 주시는 분들 환영입니다 :)