티스토리 뷰
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
'프론트엔드' 카테고리의 다른 글
| [React] 이벤트 핸들러로 파라미터 전달하기 (0) | 2020.10.28 |
|---|---|
| [React] 이벤트 핸들러에서 this 사용하기 (0) | 2020.10.27 |
| Mobile Safari에서 bounce scroll 방지 (0) | 2020.09.03 |
| 크롬 개발자도구 조건부 중단점 걸기 (0) | 2020.06.15 |
| nodejs 서버 실행 방법(직접, npm, pm2) (0) | 2020.06.11 |
- Total