iOS Safari(WebView) z-index stacking 이슈

iOS Safari 기반 WebView 환경에서는 transform 속성이 적용된 요소가 별도의 compositing layer(GPU layer) 로 승격되면서, 기존의 DOM 기반 stacking context와 다른 렌더링 계층을 형성하는 문제가 발생한다.

 

이로 인해:

• z-index 값이 낮은 요소라도
• transform이 적용된 경우

→ 일반 레이어보다 상위에 렌더링되는 현상이 발생할 수 있다.

 

원인

• transform, opacity, will-change 등의 CSS 속성은 브라우저에서 GPU compositing layer 생성 트리거로 동작
• iOS Safari(WebKit)는 이 compositing layer를 독립적인 stacking context보다 우선적으로 처리하는 경향이 있음
• 결과적으로 DOM 상의 z-index 우선순위가 깨지는 것처럼 보이는 현상 발생

 

해결 방법

모든 관련 요소를 동일한 compositing layer 전략으로 맞추어 렌더링 계층을 균일화한다:

.target {
  transform:translateZ(0);/* or translate3d(0,0,0) */
}

• 주요 레이어(겹침 관계가 있는 요소들)에 의도적으로 transform을 적용하여
• 모든 요소를 GPU layer로 승격

→ 브라우저가 동일한 기준에서 stacking을 수행하도록 유도

 

주의사항

• 불필요한 GPU layer 증가로 인해 메모리 사용량 및 성능 저하 가능
• 특히 애니메이션이 많거나 요소가 많은 경우 렌더링 비용 증가
• 가능한 경우 구조적으로 stacking context를 재설계하는 것이 더 바람직