티스토리 뷰

반응형

iPhone X 시리즈의 iOS 13.4 이전 버전에서 발생하는 이슈로 추정된다.

github.com/apache/cordova-ios/issues/417#issuecomment-603896486

 

Keyboard Dismissal Leaves Viewport Shifted in iOS 12 / XCode 10 · Issue #417 · apache/cordova-ios

Seeing a blocking issue after updating to XCode 10 related to keyboard displacement and then dismissal. When an input that would require webview centering is clicked, the viewport is repositioned t...

github.com

 

키보드가 사라질 때, 뷰포트의 위치가 위로 이동하는 현상이 발생한다.

뷰포트가 단순히 이동하여 내부에 포함된 엘리먼트가 함께 이동하는 것이아니라, 표출되는 엘리먼트는 제 자리에 놓여있는데 내부적으로 설정된 뷰표트의 값만 위로 이동하는 것이 문제이다.

즉, 표출되는 엘리먼트와 엘리먼트에 등록된 이벤트가 발생하는 위치가 상이해진다.

(엘리먼트를 누르면 이벤트가 발생하지 않고, 엘리먼트 상단의 빈 공간을 누르면 이벤트가 발생하는 등...)

 

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

키보드 표출을 유발하는 input 엘리먼트에 대해 blur 이벤트가 발생하면 스크롤을 초기화 시킨다.

$(document).on('blur', 'input', function(){ window.scrollTo(0,NaN) });

github.com/apache/cordova-ios/issues/417#issuecomment-598116299

반응형
댓글