모바일 웹킷(webkit) 브라우저에서 z-index 문제 해결 방법

모바일 웹킷 기반 브라우저, 즉 아이폰이나 아이패드의 사파리 브라우저에서 유동적(dynamically)으로 생성된 객체에 z-index가 제대로 적용되지 않는 문제가 있다.

이는 애플에서도 알고 있는 공식적인 문제인데 조만간 패치가 나오지 않는 이상 아래와 같은 방법으로 우회하여 해결한다.

 

z-index가 적용된 객체의 CSS에 아래를 추가한다.

 

-webkit-transform-style: preserve-3d; -webkit-transform: translateZ(-5px); 

 

설명하자면, z-index는 이차원 공간에서 객체를 정렬하지만, preserve-3d를 적용하고 translateZ() 값을 주면 삼차원 공간에서 객체를 위치시킨다.

따지고보면 같은 말인데 모바일 웹킷에서 삼차원으로 해야 작동하는게 문제다.

 

데스크탑 웹킷 브라우저에서는 z-index도 문제 없이 작동한다.