티스토리 뷰

ios 에서 예를들어 position fixed 된 <div class="header"> element 가 존재하는 상태에서, 
input, textarea 등에 포커스시 virtual keyboard 가 활성화 될때 <div class="header"> 의 위치가 제멋대로 변경되는 문제가 발생한다;;

구글링해서 알아보니 이문제는 ios 플랫폼에서 웹개발을 하는 전세계 수많은 사람들 사이에서 오래전부터 알려진 문제였다;
내가 구글링 했던 검색어는 "ios position fixed keyboard"
나와 같은 문제로 고생하는 사람들이 수두룩했다.

대부분 영문으로 된 문서들이었고, 살펴보면 모두 하나같이 정답은 없었고, position fixed 된 element 를 쓰지 말자는 결론이거나 혹은 각자 상황에 맞는 꼼수로 대체하는 방법들이었다.

안드로이드에서는 이런문제는 없었는데! ios 는 왜 이러는거냐 ㅠㅠ 하면서,
같은 문제를 두고 직장 동료들과 머리를 맞대어 함께 고민하면서 해볼 수 있는 방법은 다 해본 것 같다;

이런저런 꼼수로 삽질했던 과정이 짜증나기고 하고 재미있기도 했지만,
결론만 기록해 두자면.

결국은 역시 구글링이었다.
내가 도움을 얻은 포스팅은 어느 한 일본인의 블로그 포스팅.
http://www.wizforest.com/diary/140126.html

일본어를 읽을줄 몰라서 그냥 내용중에 있던 코드를 보고 아! 저 코드을 조금 변형해서 적용해보면 될것 같아 생각이 들어서
바로 적용해본 코드.

$(function(){

  $("input").each(function(){

    $(this).bind("focus", function(){

        $(".header").css("position", "absolute");

    });

    $(this).bind("blur",function(){

        $(".header").css("position", "fixed");

    });

  });

});

바로 적용해보니 불가능해보였던 문제가 해결되었다!


해결방법을 요약하자면,
input 박스에 focus 이벤트를 캐치해서 position fixed 된 div 를 absolute 로 바꿔주었다가, blur 이벤트때에 다시 fixed 로 원상복귀해놓는, ios 에서 그런 문제를 원천봉쇄하는 방법이다.

이것도 꼼수긴 한데 어쨌든 골치아픈 문제가 해결되었다 ^^

신고
댓글
댓글쓰기 폼