vh 사용 예 – 네이버 증권 모바일

ios7에서 height 100% 인 딤드 팝업

먼 미래의 단위인 것 같았던 vh 를 처음 사용했습니다. 아직 안드로이드 4.3 이하에서 지원하지 않아 적극적으로 사용하기엔 조심스럽긴 합니다. 저 역시 어떤 버그나 사이드 이펙트가 있을지 두근두근했는데, 배포한지 일주일이 지난 지금까지 다행히도 아무런 이슈가 없어서 기쁜 마음에 정리해봤어요.
그리고 다시 한번 느꼈지만 ‘뷰포트의 크기를 재는 스크립트 처리를 대신 할 수 있는 신박한 단위’ 인건 분명한 것 같습니다.

이슈

아이폰에서 키보드 노출 상태로 팝업 딤드가 보이는 경우, 위 아래로 꽉 차지 않는 이슈가 있었습니다
input 박스에 포커싱이 된 상태 + 키패드가 올라옴 + 스크롤 후, 버튼 클릭 + 딤드가 있는 팝업이 뜰 경우 재현되고, 스크롤을 조금만 해주면 정상 노출됩니다.

iOS에서 html과 body의 height를 100%로 명시해줘도,
Safari 브라우저에서 키보드가 나타나거나, 하단 네비게이션 바가 나오는 등 OS 기본 동작이 발생하는 경우,
바뀐 높이 값을 계산하지 못하기 때문입니다.

<div class="pop_dimmed"> 
    <div class="pop_box">...</div> 
</div>

html,body {height:100%}
.pop_dimmed{position:absolute;top:0;left:0;width:100%;height:100%; ...}
.pop_box{position:absolute;top:34%; ...}

CSS로 해결할 수 있을까.

문득  vh 단위가 떠올랐습니다.
뷰포트의 높이를 기준으로 크기를 잡는 신박한 단위니까 가능할 것 같은 거죠!
복잡한 것도 아니라서 height:100%; 대신 100vh 를 넣으니, 여백 없이 딤드창으로 화면이 꽉꽉 채워졌습니다. 일단 ios7에서는 문제가 없는데… 안드로이드는?
ios7에서만 나타나는 버그이니 vh 단위를 지원하지 않는 4.3이하 안드로이드 기기를 대응하지 않아도 문제가 없습니다. height:100%; 그대로 사용하면 됩니다.
vh,vw 자세히 보기

생각의 흐름

1. vh는 안드로이드 4.4 이상 전체 지원한다.
2. ios7에서만 나타나는 버그일 뿐, 안드로이드에서는 height:100%여도 이슈가 없다.
3. ios7을 분기처리해도 되지만, 100%와 100vh를 모두 입력하여 100vh를 지원하지 않으면 100% 가 되도록 하자.

새로운 버그를 만나다.

하지만… 세로 모드에서 가로 모드로 회전을 반복하니, 중앙에 있어야 할 팝업 창이 자꾸만 아래로 내려갑니다. 아니 왜!!!

조금만 구글링을 해도 나오는 vh버그로 (can I use에도 쓰여있네요), ios7 에서 vh단위로 height를 주면 디바이스를 회전할 때마다 점점 그 값을 키워가는 이상한 버그입니다. (참고로 뷰포트의 가로 길이를 기준으로 잡는 vw 는 잘 동작합니다.)
☞ io7 – vh 버그 자세히 보기
 

해결

결국 부모 요소인 딤드 창이 커지면서 position:absolute;top:34%로 위치를 잡은 자식요소 팝업 창이 점점 내려갔었던 겁니다.
따라서 팝업 창은 position:fixed로 변경하였고, 딤드 창이 커지더라도 스크립트로 스크롤을 막았기 때문에 신경쓰지 않기로 했습니다.

/* 1. 스크롤 된 만큼 스크립트로 top값 계산 */
/* 2. vh를 지원하지 않는 브라우저에서는 height:100% */
.pop_dimmed{position:absolute;top:0;left:0;width:100%;height:100%;height:100vh; ...}
/* 뷰포트 기준으로 위치를 잡도록 fixed 처리 */
.pop_box{position:fixed;top:34%; ...}

 팝업 창을 “fixed” 로 변경하면 이슈는 없을까?

“fixed 속성을 지원하지 않는 device는 어떡할 것인가?” 라는 의문이 생길 수 있는데요, fixed는 거의 모든 환경에서 지원을 합니다. 다만 Partial로 지원하기 때문에 fixed + system scroll 이나 fixed + input 등을 만나면 이슈가 생기는 거죠.
이번 팝업에서는 fixed 이지만 system scroll을 스크립트로 막아 놓은 상태이며, input 도 없기 때문에 fixed 이슈는 걱정하지 않아도 됩니다. 아예 지원하지 않는 디바이스는 대응하지 않았습니다.