css z-index perdido após webkit transformar translate3d

Eu tenho dois elementos div absolutamente posicionados que se sobrepõem. Ambos definiram valores de índice z via css. Eu uso a translate3dtransformação do webkit para animar esses elementos fora da tela e, em seguida, de volta na tela. Após a transformação, os elementos não respeitam mais seus z-indexvalores definidos .

Alguém pode explicar o que acontece com o índice z / ordem de pilha dos elementos div depois que faço uma transformação do webkit neles? E explicar o que posso fazer para manter a ordem da pilha dos elementos div?

Aqui estão mais algumas informações sobre como estou fazendo a transformação.

Antes da transformação, cada elemento obtém esses dois valores de transição do webkit definidos via css (estou usando jQuery para fazer as .css()chamadas de função:

element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });

O elemento é então animado usando o translate3d -webkit-transform:

element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });

A propósito, eu tentei definir o terceiro parâmetro de translate3d com vários valores diferentes para tentar replicar a ordem de pilha no espaço 3D, mas sem sorte.

Além disso, os navegadores iPhone / iPad e Android são meus navegadores de destino em que este código precisa ser executado. Ambos suportam transições de webkit.

Isso pode estar relacionado a: https://bugs.webkit.org/show_bug.cgi?id=61824

Basicamente, quando você aplica uma transformação 3D no eixo z, o índice z não pode mais ser contabilizado (agora você está em um plano de renderização tridimensional, use valores z diferentes). Se você quiser voltar para a renderização 2D para elementos filhos, use transform-style: flat;.

Isso está definitivamente relacionado ao bug observado por samy-delux. Isso deve afetar apenas os elementos posicionados como absolutos ou relativos. Para solucionar o problema, você pode aplicar a seguinte instrução css a cada elemento posicionado dessa maneira e que esteja causando problemas:

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

Isso aplicará a transformação ao elemento sem realmente fazer uma transformação, mas afetando sua ordem de renderização para que fique acima do elemento que está causando o problema.

Um pouco tarde para isso, mas tente colocar os elementos que perderam seu Z-index colocando o seguinte, tive um problema ao fazer algumas coisas de paralaxe recentemente e isso ajudou muito.

transform-style: preserve-3d;

Isso economiza colocação

transform: translate3d(0,0,0);

Em outros elementos que colocam mais pressão na GPU

Esperando para ver o exemplo

Você já tentou fazer uma escala de transformação (1)? Lembro-me de ter tido um problema semelhante e tive que reorganizar a ordem html dos elementos e utilizar uma transformação que não precisava apenas porque o índice z do uso da transformação mudou.

Se eu não estiver errado, toda vez que você usar uma transformação, ela se tornará o índice z mais alto disponível e será ordenado pelo elemento html mais próximo ao início da tag. Então, de cima para baixo.

Espero que isso ajude

z-index funcionará contra divs transformados em 3D se você estilizar o elemento empilhável com -webkit-transform: translateZ(0px);

Snippet no codepen -> http://codepen.io/mrmoje/pen/yLIul

No exemplo, os botões stack upe stack downaumentam e diminuem o índice z do rodapé (+/- 1) em relação ao elemento girado (um img neste caso).

Não consegui reproduzir o problema que você descreve aqui. Independentemente do que eu fizer, o valor do z-index é retido em todas as transformações. Estou testando usando Chromium (Google Chrome).

O terceiro argumento da função translate3d manipula o eixo z do elemento. O conceito é semelhante, mas não exatamente igual, ao índice z ... Os elementos com um eixo z inferior estão abaixo dos elementos com um valor superior.

Eu sei que você tentou valores do terceiro argumento para corresponder ao seu índice z pretendido, mas o problema é que o eixo z não parece mudar durante a animação CSS3. No exemplo a seguir, o elemento pairado deve estar no topo, mas #element_a permanece no topo.

Se eu adicionar um índice z ao seletor regular e ao seletor: hover, parece funcionar e permitir que o elemento pairado fique no topo.

Embora não seja exatamente o que você estava procurando, esse comportamento oferece uma solução. Você só precisa usar translate3d e z-index para definir a ordem da renderização inicial.

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

Outra maneira de contornar isso é que você pode criar um elemento pai e aplicar todas as outras transições relacionadas a ele:

# 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