WebKit의 `translate3d`가 CSS `z-index` 스태킹을 중단하는 이유는 무엇입니까?

WebKit Transform Translate3D가 CSS Z-Index를 방해함

절대적으로 배치되면 겹치는 요소에 Z-색인 스택이 적용되어 상대 순서가 결정됩니다. 캔버스에. 그러나 애니메이션에 Translate3d 웹킷 변환을 사용하면 이러한 스태킹 동작이 중단됩니다. 이 문제는 웹킷 전환을 지원하는 모든 주요 모바일 브라우저에 영향을 미칩니다.

문제 이해

WebKit 버그 데이터베이스(https://bugs.webkit.org)에 보고된 대로 /show_bug.cgi?id=61824), z축에 3D 변환을 적용하면 z 인덱스 값이 재정의됩니다. 그 이유는 2D 렌더링 평면에서 3D 렌더링 평면으로의 전환에 있습니다. 3D 공간 내에서 z 값은 요소 위치를 결정하므로 z-index는 관련성이 없게 렌더링됩니다.

문제 해결

이러한 중단을 방지하려면 2D 렌더링으로 돌아가야 합니다. 다음 CSS 속성을 적용하여 하위 요소에 대해:

transform-style: flat;

이 속성을 사용하면 하위 요소가 2D 렌더링 평면, 상위 요소의 3D 변환 후에도 Z-인덱스 스택 동작을 유지합니다.

위 내용은 WebKit의 `translate3d`가 CSS `z-index` 스태킹을 중단하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!