webkit 변환 translate3d 후 css z-index가 손실 됨
겹치는 두 개의 절대 위치 div 요소가 있습니다. 둘 다 CSS를 통해 Z- 색인 값을 설정했습니다. 내가 사용하는 translate3d웹킷가 화면에 다시 다음 화면 오프 이러한 요소를 애니메이션으로 변환합니다. 변환 후 요소는 더 이상 설정된 z-index값을 따르지 않습니다 .
웹킷 변환을 수행하면 div 요소의 Z- 색인 / 스택 순서가 어떻게되는지 누구든지 설명 할 수 있습니까? 그리고 div 요소의 스택 순서를 유지하기 위해 무엇을 할 수 있는지 설명 하시겠습니까?
변환을 수행하는 방법에 대한 추가 정보가 있습니다.
변환하기 전에 각 요소는 css를 통해 설정된 두 개의 웹킷 전환 값을 가져옵니다 (jQuery를 사용하여 .css()함수 호출 을 수행하고 있습니다.
element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });
그런 다음 translate3d -webkit-transform을 사용하여 요소에 애니메이션을 적용합니다.
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
Btw, translate3d3d 공간에서 스택 순서를 복제하기 위해 의 세 번째 매개 변수 를 여러 다른 값으로 설정하려고 시도했지만 운이 좋지 않았습니다.
또한 iPhone / iPad 및 Android 브라우저는이 코드를 실행해야하는 대상 브라우저입니다. 둘 다 웹킷 전환을 지원합니다.
관련 정보 : https://bugs.webkit.org/show_bug.cgi?id=61824
기본적으로 z 축에 3D 변환을 적용하면 Z- 인덱스를 더 이상 고려할 수 없습니다 (이제 3 차원 렌더링 평면에 있으므로 다른 z- 값 사용). 하위 요소에 대해 2D 렌더링으로 다시 전환하려면을 사용하십시오 transform-style: flat;.
이것은 samy-delux가 지적한 버그와 가장 관련이 있습니다. 이것은 절대적 또는 상대적으로 배치 된 모든 요소에만 영향을 미칩니다. 문제를 해결하기 위해 이러한 방식으로 배치되어 문제를 일으키는 모든 요소에 다음 css 문을 적용 할 수 있습니다.
-webkit-transform: translate3d(0,0,0);
이것은 실제로 변환을 수행하지 않고 요소에 변환을 적용하지만 렌더링 순서에 영향을 미치므로 문제를 일으키는 요소 위에 있습니다.
이것에 조금 늦었지만 Z-index를 잃은 요소를 다음과 같이 배치 해보십시오. 최근 시차 작업을 할 때 문제가 있었고 이것이 크게 도움이되었습니다.
transform-style: preserve-3d;
이것은 퍼팅을 저장합니다
transform: translate3d(0,0,0);
GPU에 더 많은 부담을주는 다른 요소
예를보기를 기다리는 중
변환 스케일 (1)을 시도해 보셨습니까? 비슷한 문제가 있었던 것을 기억하고, 요소의 html 순서를 다시 정렬하고 transform 사용의 z-index가 변경 되었기 때문에 필요하지 않은 변환을 활용해야했습니다.
오류가 아니라면 변환을 사용할 때마다 사용 가능한 가장 높은 Z- 색인이되고 태그 시작 부분에 가장 가까운 html 요소로 정렬됩니다. 그래서 아래에서.
이 도움이
z-index 스택 가능한 요소의 스타일을 지정하면 3d 변환 div에 대해 작동합니다. -webkit-transform: translateZ(0px);
codepen의 스 니펫-> http://codepen.io/mrmoje/pen/yLIul
실시 예에서, 상기 버튼 stack up및 stack down인상과 회전 요소에 대하여 Z 꼬리말의 인덱스 (+/- 1) (이 경우의 IMG)을 하향 조정한다.
여기에 설명하신 문제를 재현 할 수 없었습니다. 내가하는 일에 관계없이 Z- 색인 값은 모든 변환에서 유지됩니다. Chromium (Google Chrome)을 사용하여 테스트 중입니다.
translate3d 함수의 세 번째 인수는 요소의 z 축을 조작합니다. 개념은 Z- 색인과 유사하지만 정확히 동일하지는 않습니다. Z 축이 낮은 요소는 값이 높은 요소 아래에 있습니다.
의도 한 Z- 색인과 일치하기 위해 세 번째 인수의 값을 시도한 것을 알고 있지만 문제는 CSS3 애니메이션 중에 Z 축이 변경되지 않는 것 같습니다. 다음 예에서 마우스로 가리키고있는 요소는 맨 위에 있어야하지만 #element_a는 맨 위에 있습니다.
일반 선택기와 : hover 선택기 모두에 Z- 색인을 추가하면 작동하는 것 같고 마우스를 올린 요소가 최상위가 될 수 있습니다.
정확히 찾고 있던 것은 아니지만이 동작은 해결책을 제공합니다. translate3d 및 z-index를 사용하여 초기 렌더링 순서를 설정하기 만하면됩니다.
<style>
div {
width: 300px;
height: 150px;
background-color: white;
border: 5px outset gray;
float: left;
margin: 20px;
-webkit-transition: 2s;
}
#element_a {
-webkit-transform: translate3d(0, 0, 50px);
}
#element_b {
-webkit-transform: translate3d(0, 0, 100px);
}
#element_a:hover {
-webkit-transform: translate3d(100px, 0, 60px);
}
#element_b:hover {
-webkit-transform: translate3d(-100px, 0, -60px);
}
</style>
<body>
<div id="element_a">
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
</div>
<div id="element_b">
<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png">
</div>
</body>
이 문제를 해결하는 또 다른 방법은 부모 요소를 만들고 이와 관련된 다른 모든 전환을 적용하는 것입니다.
# Apply transitions to a parent div
<div>
# This image z-index -1
<img src="foo"/>
# This image z-index -3
<img src="bar"/>
#This image z-index -2
<img src="gg"/>
</div>
참고 URL : https://stackoverflow.com/questions/5472802/css-z-index-lost-after-webkit-transform-translate3d
'code' 카테고리의 다른 글
| Stylecop 대 FXcop (0) | 2020.08.28 |
|---|---|
| PC에서 APK를 설치하는 방법은 무엇입니까? (0) | 2020.08.28 |
| 다양한 데이터 구조의 실제 사용 (0) | 2020.08.27 |
| 연결 문자열의 "서버"대 "데이터 원본" (0) | 2020.08.27 |
| Android 5.1.1 이상-getRunningAppProcesses ()는 내 애플리케이션 패키지 만 반환합니다. (0) | 2020.08.27 |