css z-index perdido después de la transformación webkit translate3d

Question

Tengo dos elementos div completamente posicionados que se superponen. Ambos han establecido valores de z-index a través de css. Utilizo la transformación webkit translate3d para animar estos elementos fuera de la pantalla y luego volver a la pantalla. Después de la transformación, los elementos ya no respetan sus valores establecidos z-index.

¿Alguien puede explicar qué pasa con el z-index/stack-order de los elementos div una vez que hago una transformación de webkit en ellos? ¿Y explicar qué puedo hacer para mantener el orden de apilamiento 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 presenta estos valores de transición de dos webkit establecidos a través de CSS (estoy usando jQuery para hacer la función de .css() llama:

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

El elemento está animado a continuación, utilizando la transformada translate3d -webkit :.

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

por cierto, he intentado fijar el 3er parámetro de translate3d a varios valores diferentes para tratar de replicar la pila de orden en el espacio 3D, pero a ninguna suerte

Además, los navegadores iPhone/iPad y Android son mi navegador de destino en el que este código debe ejecutarse. Ambos admiten transiciones de webkit.