iOS 키보드가 입력 필드 가리는 문제, visualViewport API로 해결

🤖 778 in / 781 out / 1559 total tokens

입력 모달에서 키보드가 입력 필드를 가리는 문제를 visualViewport API로 해결했다.

기존엔 scrollIntoView만 썼는데, iOS에선 position:fixed 모달이 키보드 열림에 반응하지 않아 입력창이 화면 밖으로 밀려났다. visualViewport.resize 이벤트로 키보드 올라온 실제 가시 높이를 감지하고, 모달의 maxHeight를 vv.height-10px로 동적 조절하도록 수정했다. 폴백도 추가해 visualViewport 미지원 환경도 고려했다.

function onInputFocus(e) {
  focusedInput = e.target;
  if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', onViewportResize);
  }
}
 
function onViewportResize() {
  const vv = window.visualViewport;
  sheetEl.style.maxHeight = `${vv.height - 10}px`;
  focusedInput?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}

iOS에서 fixed 요소는 키보드 열림에 반응하지 않는다. visualViewport API가 필수다.

iOS keyboard visualViewport modal Svelte