아티클

vh 단위 사용기

sheep**** 2015-07-08 18:50:46

 

 'iOS7' 에서 height 100% 인 딤드 팝업


안녕하세요. UI개발실 양주희입니다.
먼 미래의 단위인 것 같았던 vh 를 처음 사용했습니다. 아직 안드로이드 4.3 이하에서 지원하지 않아 적극적으로 사용하기엔 조심스럽긴 합니다. 저 역시 어떤 버그나 사이드 이펙트가 있을지 전혀 알 수 없었는데, 다행히도 아무 이슈가 없어서 기쁜 마음에 정리해봤습니다.
그리고 다시 한번 느꼈지만 '뷰포트의 크기를 계산하는 스크립트 처리를 대신 할 수 있는 CSS 단위' 인건 분명한 것 같습니다.


1. 이슈
iOS7에서 키패드가 올라온 상태로 팝업 딤드 창이 뜰 경우, 위 아래로 꽉 차지 않는 이슈가 있습니다.
input 박스에 포커싱이 된 상태 + 키패드가 올라옴 + 스크롤 후, 버튼 클릭 + 딤드가 있는 팝업이 뜰 경우 재현되고, 스크롤을 조금만 해주면 정상 노출됩니다.
iOS7 에서 htmlbody 의 height가 100%여도 safari 브라우저의 하단 네비게이션 바나 키패드가 올라왔다 사라지는 경우, 바뀐 높이 값을 계산하지 못하기 때문입니다. 

딤드창의 height가 100% 이지만, 키보드가 있던 자리만큼 빈 공간이 남았습니다.

// html
<div class="pop_dimmed"> // 딤드
    <div class="pop_box">...</div> // 예,아니오 팝업
</div>
 
// css
.pop_dimmed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
...}
.pop_box {
position: absolute;
top: 34%; 
...} 

2. css로 해결할 수 있을까.
뷰포트의 높이를 기준으로 크기를 잡는 vh문득 떠올랐습니다. iOS7에서만 나타나는 버그이니 4.3이하 안드로이드 기기를 대응하지 않아도 문제가 없습니다
따라서 딤드창의 height에 100vh를 추가하여 일단 이슈는 해결 한 것 같았습니다. 

1) vh 는 4.3이하의 안드로이드를 제외하고 모두 지원한다.
2) 높이값을 잡지 못하는 버그는 iOS7에서만 나타나기 때문에
3) 안드로이드에서는 height:100%; 여도 이슈가 없다. 
4) iOS7만 분기해도 되지만, 100%와 100vh를 모두 입력하여 100vh를 지원하지 않으면 100% 가 되도록 하자.

3. 새로운 버그를 만나다.
 : Partial support in iOS7 is due to buggy behavior of the "vh" unit (see workaround).
하지만 세로 - 가로 모드로 회전을 반복하니, 중앙에 있어야 할 팝업 창이 점점 아래로 내려갑니다. iOS7 에서 vh 단위로 height를 주면 디바이스를 회전할 때마다 점점 그 값을 키워가는 버그입니다. 결국 relative인 딤드 창이 커지면서 absolute인 팝업 창이 점점 내려갔었던 겁니다. (참고로 뷰포트의 가로 길이를 기준으로 잡는 vw 는 잘 동작합니다.)


4. 해결
팝업 창이 고정되도록 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” 로 변경하면 이슈는 없을까?

 

: Partial support in iOS7 is due to buggy behavior of the "vh" unit (see workaround).

 

“fixed 속성을 지원하지 않는 디바이스는 어떡할 것인가?” 라는 의문이 생길 수 있는데, iOS에서 fixed + system scroll 이나 fixed + input 등을 만나는 경우를 제외하고 모든 환경에서 지원을 합니다.
이번 팝업에서는 fixed 이지만 system scroll을 스크립트로 막아 놓은 상태이며, input 도 없기 때문에 fixed 이슈는 발생하지 않았습니다.
 

 

댓글 0
댓글을 작성하려면 해주세요.