[JS] IOS Safari에서 화면회전시 가로 스크롤이 생기는 버그 해결방법

IOS 계열 사파리 브라우저에서 화면을 회전하면 브라우저에 가로 스크롤이 생기는 경우가 있다.

사파리에서 화면을 회전하면 textArea의 placeholder 영역이 늘어나면서 생기는 현상이다.

화면회전시 placeholder를 제거했다가 다시 추가해주는 방법으로 처리해야한다.

 

1. 화면회전에 대한 이벤트를 걸어준다.

$(window).bind("orientationchange", fm_optimizeInput);

 

2. 모든 textArea의 placeholder를 제거하고 다시 설정한다.

function fm_optimizeInput(){

    ${"input[placeholder],textarea[placeholder]").each(function(){
        var tmpText = $(this).attr("placeholder");
        if ( tmpText != "" ) {
            $(this).attr("placeholder", "").attr("placeholder", tmpText);
        }
    })
}