[HTML] iOS에서 키보드 활성화 시 Viewport 문제 정리

1) iOS에서 키보드 활성화 시 Viewport 계산 문제

문제 원인

1. 키보드로 인해 Viewport가 변경됨:

   • iOS의 사파리에서 키보드가 표시되면 시각적 뷰포트 는 줄어들지만, 레이아웃 뷰포트는 같은 크기로 유지합니다.
   • Android는 해당 키패드만큼 자동으로 줄여줍니다.

2. getBoundingClientRect의 상대 위치:

   • 이 메서드는 요소의 뷰포트에 대한 상대적 위치를 반환합니다.

   • Safari(iOS)에서는 키보드가 나타날 때 시각적 뷰포트 크기를 자동으로 줄여주지 않습니다.

     getBoundingClientRect가 반환하는 위치 정보 (top, left, right, bottom 등)
     (출처: https://developer.mozilla.org/ko/docs/Web/API/Element/getBoundingClientRect)
     

3. iOS의 경우: 해당 키패드 만큼 body 태그가 올라간다고 생각하면 된다.

   • 키보드를 열기전 : 화면의 높이
   • 키보드를 열었을 때 : 화면의 높이 + 키보드의 높이

(출처: https://jooonho.dev/web/2023-01-09-webview-issue/)

해결 방법

• 스크롤 위치 조정:
  • window.scrollY 값을 추가로 계산해 문서의 전체 좌표 기준으로 보정.

const rect = element.getBoundingClientRect();
const adjustedTop = rect.top + window.scrollY;

2) 결론

• iOS:

  • 키보드가 표시되면 Safari의 getBoundingClientRect는 뷰포트 크기를 잘못 반영하거나 지연된 값을 반환할 가능성이 큽니다.
    (출처: https://stackoverflow.com/questions/26347742/safaris-getboundingclientrect-implementation-returns-incorrect-top)
  • 스크롤 위치를 추가해 위치 계산을 보정하는 로직이 필요합니다.

• Android:

  • 뷰포트 크기와 요소 위치가 대부분 정확히 계산되므로 별도 처리 없이 사용할 수 있습니다.