css z-index perdido después de la transformación de webkit Translate3d
Tengo dos elementos div absolutamente posicionados que se superponen. Ambos han establecido valores de índice z a través de CSS. Utilizo la translate3dtransformación webkit para animar estos elementos fuera de la pantalla y luego de regreso a la pantalla. Después de la transformación, los elementos ya no respetan sus z-indexvalores establecidos.
¿Alguien puede explicar qué sucede con el índice z/orden de pila de los elementos div una vez que hago una transformación webkit en ellos? ¿Y explicar qué puedo hacer para mantener el orden de pila de los elementos div?
Aquí hay más información sobre cómo estoy haciendo la transformación.
Antes de la transformación, cada elemento obtiene estos dos valores de transición del webkit establecidos a través de CSS (estoy usando jQuery para realizar las .css()llamadas a funciones:
element.css({ '-webkit-transition-duration': duration + 's' });
element.css({ '-webkit-transition-property': '-webkit-transform' });
Luego, el elemento se anima usando Translate3d -webkit-transform:
element.css({ '-webkit-transform': 'translate3d(' + hwDelta + 'px, 0, -1px)' });
Por cierto, intenté configurar el tercer parámetro en translate3dvarios valores diferentes para intentar replicar el orden de la pila en el espacio 3D, pero no tuve suerte.
Además, los navegadores iPhone/iPad y Android son mi navegador de destino en el que debe ejecutarse este código. Ambos admiten transiciones de webkit.
Esto podría estar relacionado con: https://bugs.webkit.org/show_bug.cgi?id=61824
Básicamente, cuando aplicas una transformación 3D en el eje z, el índice z ya no se puede tener en cuenta (ahora estás en un plano de representación tridimensional, usa diferentes valores z). Si desea volver a la representación 2D para elementos secundarios, utilice transform-style: flat;.
Definitivamente esto está relacionado con el error observado por samy-delux. Esto sólo debería afectar a los elementos que estén posicionados como absolutos o relativos. Para solucionar el problema, puede aplicar la siguiente declaración CSS a cada elemento que esté colocado de esta manera y esté causando problemas:
-webkit-transform: translate3d(0,0,0);
Esto aplicará la transformación al elemento sin realizar realmente una transformación, pero afectará su orden de representación para que esté por encima del elemento que causa el problema.
Un poco tarde para esto, pero intente colocar los elementos que han perdido su índice Z colocando lo siguiente: recientemente tuve un problema al hacer algunas cosas de paralaje y esto me ayudó enormemente.
transform-style: preserve-3d;
Esto ahorra poner
transform: translate3d(0,0,0);
Sobre otros elementos que ejercen más presión sobre la GPU
