[CSS] Safari z-index

개인프로젝트 진행 중 사파리에서 z-index를 설정해둔 요소가 생각대로 보이지 않는 것을 발견했다!

safari / chrome

 

css animation을 이용한 물결치는 효과가 타이틀을 가리지 않게 하기위해 z-index를 적용해주었는데, safari는 그대로 가려진다😶‍🌫️

 

 

시도

이 외에도 폰트사이즈, 물결 애니메이션의 위치가 다르게 나타나는 것은 과제 해설 영상에서 소개해주신 reset.css를 적용해 해결했지만 위 현상은 해결되지 않았다.

혹시 글자에만 인덱스를 적용한 것이 문젠가 싶어서 wave에도 각각 인덱스를 줘봤지만 해결되지 않았다.

검색해보니 safari의 z-index 문제는 꽤 흔하게 일어나는 문제인 것 같다.

 

 

원인

safari가 다른 브라우저와 렌더링 알고리즘이 달라 발생하는 문제다. 특히 두개 이상의 요소에 z-index값이 같은 경우 생각과 다른 순서로 렌더될 수 있고, position: absolute 인 요소에 z-index가 제대로 적용되지 않는다고 한다!

 

 

해결

transform 설정

transform: translate3d(-50%, 0, 0px);
z-index: 999;

translate3d 혹은 translateZ로 z축 이동을 시켜준다. 그리고 z-index를 적용해준다!