webkit 변환 translate3d 후 css z-index가 손실 됨

98

겹치는 두 개의 절대 위치 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 브라우저는이 코드를 실행해야하는 대상 브라우저입니다. 둘 다 웹킷 전환을 지원합니다.

css webkit transform

— Rafe
소스

예제를 볼 수있는 링크를 게시 할 수 있습니까?

— Littlemad 2011 년

1

나는 같은 문제를 만났다. 3D 가속을 강제하기 위해 요소 스타일 "-webkit-transform : translate3d (0,0,0)"내부에 <iframe> 태그가 하나 있습니다. Z- 색인이 더 높은 외부 프레임은 항상 내부 iframe 요소에 의해 숨겨집니다. 시각적으로 만 숨겨져있어 보이지 않는 외부 요소를 "클릭"할 수 있습니다. 이것은 Mobile Safari에서만 발생합니다.

— Morgan Cheng

나는 그것이 내 코드가 작동하지 않는 이유를 알아내는 데 10 시간을 보냈습니다. 윽

— Dikeneko

52

기본적으로 z 축에 3D 변환을 적용하면 Z- 인덱스를 더 이상 고려할 수 없습니다 (이제 3 차원 렌더링 평면에 있으므로 다른 z- 값 사용). 하위 요소에 대해 2D 렌더링으로 다시 전환하려면을 사용하십시오 transform-style: flat;.

— 새미 디럭스
소스

13

기본적으로 z 축에 3D 변환을 적용하면 Z- 인덱스를 더 이상 고려할 수 없습니다 (이제 3 차원 렌더링 평면에 있으므로 다른 z- 값 사용). 하위 요소에 대해 2D 렌더링으로 다시 전환하려면을 사용하십시오 transform-style: flat;.

— samy-delux

2

그래서 "preserve-3d"모드에서는 z- 축을 사용하여 순서를 설정해야하고, flat 모드에서는 z-index를 사용해야합니다. 버그는 HW 가속 변환과 함께 사파리의 Z- 인덱스가 손상된다는 것입니다.

— Steven Lu

1

작동하지 않습니다. 클래스별로 애니메이션 스타일을 제거하는 경우에만 작동합니다.

— fdrv

44

이것은 samy-delux가 지적한 버그와 가장 관련이 있습니다. 이것은 절대적 또는 상대적으로 배치 된 모든 요소에만 영향을 미칩니다. 문제를 해결하기 위해 이러한 방식으로 배치되어 문제를 일으키는 모든 요소에 다음 css 문을 적용 할 수 있습니다.

-webkit-transform: translate3d(0,0,0);

이것은 실제로 변환을 수행하지 않고 요소에 변환을 적용하지만 렌더링 순서에 영향을 미치므로 문제를 일으키는 요소 위에 있습니다.

— divThis
소스

Chrome (35.0.1916.114m)을 사용하여이 규칙이 없으면 요소가 뒤집힌 후 [transform : rotateY (180deg)] jQuery 클릭 핸들러가 해당 요소에 대해 더 이상 작동하지 않음을 발견했습니다. 또한, 플립 후, 아티팩트가 화면에 남는 문제가 있으며, 특히 translate3d가없는 한 불투명도가 변경된 경우 문제가 있습니다! 이 기사는 도움이 sitepoint.com/fix-chrome-animation-flash-bug

— 필립 머피

2

이것은 두 개의 고정 요소와 관련된 매우 끈적 끈적한 문제를 해결했습니다. 하나는 3D 변형 요소를 포함합니다. 3d 변형 된 요소는 기본적으로 오버플로되어 위의 수정 사항이 적용될 때까지 다른 요소 위에 놓입니다.

— Collin James

1

작동하지 않습니다. 클래스별로 애니메이션 스타일을 제거하는 경우에만 작동합니다.

— fdrv

12

이것에 조금 늦었지만 Z-index를 잃은 요소를 다음과 같이 배치하려고 시도하십시오. 최근 시차 작업을 할 때 문제가 있었고 이것이 크게 도움이되었습니다.

transform-style: preserve-3d;

이것은 퍼팅을 저장합니다

transform: translate3d(0,0,0);

GPU에 더 많은 부담을주는 다른 요소

— 러스티 콜린스
소스

1

요소가 3d 인 경우 변환이 GPU에 추가 부담을 줄 것으로 기대하지 않습니다. 어쨌든 계산이 필요합니다. 당신은 이것을 무엇에 근거하고 있습니까?

— Micros

7

예를보기를 기다리는 중

변환 스케일 (1)을 시도해 보셨습니까? 비슷한 문제가 있었던 것을 기억하고, 요소의 html 순서를 다시 정렬하고 transform 사용의 z-index가 변경 되었기 때문에 필요하지 않은 변환을 활용해야했습니다.

오류가 아니라면 변환을 사용할 때마다 사용 가능한 가장 높은 Z- 색인이되고 태그 시작 부분에 가장 가까운 html 요소로 정렬됩니다. 그래서 아래에서.

이 도움이

— 리틀 매드
소스

6

z-index 스택 가능한 요소의 스타일을 지정하면 3d 변환 div에 대해 작동합니다. -webkit-transform: translateZ(0px);

codepen의 스 니펫-> http://codepen.io/mrmoje/pen/yLIul

예에서 버튼을 stack up누르고 stack down회전 된 요소 (이 경우 img)에 대해 바닥 글의 Z- 색인 (+/- 1)을 올리고 내립니다.

— Mrmoje
소스

스택 위로 다시 클릭 할 수 없습니다

— clevertension

안녕하세요 @Moje 나는 또한이 문제에 대해 궁금합니다. 스택 업은 여전히 다시 클릭 할 수 없습니다.

— alchuang 2014-07-31

번역 된 요소에 음수 Z- 색인을 추가하지 않은 이유는 무엇입니까? 감사합니다

— Will

3

여기에 설명하신 문제를 재현 할 수 없었습니다. 내가하는 일에 관계없이 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>

2

이것은 나를 위해 일했습니다 – 감사합니다! '앞에'표시하려는 요소에 다음을 추가했습니다. -webkit-transform : translate3d (0, 0, 1px);

— Sam Dutton

0

이 문제를 해결하는 또 다른 방법은 부모 요소를 만들고 이와 관련된 다른 모든 전환을 적용하는 것입니다.

# 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>

JsFiddle

— 녹
소스