z-index css потерян после преобразования webkit translate3d

У меня есть два абсолютно позиционированных элемента div, которые перекрываются. Оба установили значения z-index через css. Я использую преобразование webkit translate3d для анимации этих элементов за пределами экрана, а затем обратно на экран. После преобразования элементы больше не соблюдают свои значения набора z-index .

Кто-нибудь может объяснить, что происходит с z-index / порядком стека элементов div, когда я выполняю преобразование webkit на их? И объясните, что я могу сделать, чтобы сохранить порядок стека элементов div?

Вот дополнительная информация о том, как я выполняю преобразование.

Перед преобразованием каждый элемент получает эти два значения перехода webkit, установленные с помощью 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)' });

Кстати, Я попытался установить 3-й параметр translate3d на несколько различных значений, чтобы попытаться воспроизвести порядок стека в трехмерном пространстве, но безуспешно.

Кроме того, я использую браузеры iPhone / iPad и Android. целевой браузер, в котором должен работать этот код. Оба поддерживают переходы через webkit.