[CSS3] iframe 모바일(사파리) 스크롤 안될때 해결방법

반응형 사이트를 작업하면서 생긴 이슈입니다.

iframe을 모바일에서 스크롤 안되는 문제가 있었는데

특히 사파리(아이폰에서 안된다능....)에서 안된다는 이슈가 있었습니다.

특정 영역 안에 iframe을 넣으면 스크롤이 안될뿐더러 모바일 화면에서 영역을 벗어나 넘치는 현상입니다.

구글신(?)의 힘을 빌려 서치하던 중 

여러가지 해결 방법이 있었는데

제가 잘못 적용한것도 있을 수 있지만 완벽하진 않았습니다.

그래서 조금 수정해서 올려봅니다.

HTML

<div class="iframe-wrap">
    <iframe src="주소경로" frameborder="0"></iframe>
</div>

SCSS

.iframe-wrap{
    border: 1px solid #d6d6d6;
    height: 150px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    iframe{
        width:100%;
        height:100%;
        font-size:1em;
    }
}

위의 코드를 보시면 iframe의 스크롤 생성을 위해서 꼭 넣어야할 속성들이 있습니다.

그것은 아래와 같습니다.

/* 부모요소에 넣어야할 속성 */
.iframe-wrap{overflow: auto; -webkit-overflow-scrolling: touch;}


/* 자식요소에 넣어야할 속성 */
.iframe-wrap iframe{width: 100%; height: 100%;}

-webkit-overflow-scrolling: touch; 같은경우 모바일에서 터치하여 스크롤할 수 있게하는 속성입니다.

그리고 자식요소에 height:101%; 을 주라고 

대부분의 블로그에서 설명을 하고 있는데 

이는 iframe의 영역이 조금이나마 벗어나게하여 스크롤을 생성하게 하려는 것인데...

PC에서 화면을 확인하면 스크롤이 이중으로 생기는 문제가 있습니다.

그래서 height를 100%으로 변경하였습니다.

우선 모바일 화면 확인 시 IOS나 Android에서 이상없을을 확인하였습니다.

이 부분에 대한 더 좋은 방법이나 의견이 있다면 댓글 부탁 드립니다.

읽어 주셔서 감사합니다. ;)