IOS(iPad, iPhone)에서 position:fixed된 header영역이 움직이는 현상

애증의 판교프로젝트이자, 나의 첫 모바일 프로젝트인 KTOOO프로젝트!!

지난 3월부터 시작하고, 내가 5,6,7월 약 2달간 퍼블리싱을 했던 이 프로젝트는 지금 한창 검수중이다.

그러던 중 발견된 버그!!! 

IOS에서 입력창(INPUT)에 입력한 후 Done버튼이 아닌, 다른 영역을 터치하게되면, 입력창을 기준으로 헤더가 움직이는 현상이다.

아래의 동영상을 보면 아~ 할 것이다.

이런 버그가 발생하는 이유는 입력창을 기준으로 position 영역이 다시 잡혀지기 때문에, position:fixed 한 값이 조정되는 것이다.

그러기 위해선 화면영역을 재조정할 필요가 있다.

그래서 다음의 코드처럼 blur 이벤트가 발생할때, 스크롤의 위치를 가장 상단, 왼쪽으로 옮겨주면 문제가 해결된다

$(document).on('blur', 'input, textarea', function() {
    setTimeout(function() {
        window.scrollTo(document.body.scrollLeft, document.body.scrollTop);
    }, 0);
});