css z-index utracony po przekształceniu webkita translate3d

Mam dwa absolutnie ustawione elementy div, które się nakładają. Oba mają ustawione wartości indeksu z za pośrednictwem css. Używam translate3dWebKit przekształcić animowanie tych elementów z ekranu, a następnie z powrotem na ekran. Po transformacji elementy nie przestrzegają już ustalonych z-indexwartości.

Czy ktoś może wyjaśnić, co dzieje się z kolejnością Z-index / stack elementów div, gdy wykonam na nich transformację webkita? I wyjaśnij, co mogę zrobić, aby zachować kolejność elementów div na stosie?

Oto więcej informacji o tym, jak dokonuję transformacji.

Przed transformacją każdy element otrzymuje te dwie wartości przejścia webkit ustawiane za pośrednictwem css (używam jQuery do wykonywania .css()wywołań funkcji:

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

Element jest następnie animowany przy użyciu translate3d -webkit-transform:

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

Przy okazji, próbowałem ustawić trzeci parametr translate3dna kilka różnych wartości, aby spróbować odtworzyć kolejność stosu w przestrzeni 3D, ale bez powodzenia.

Ponadto przeglądarki iPhone / iPad i Android są moją docelową przeglądarką, na której ten kod musi działać. Oba obsługują przejścia z webkitami.

Może to być związane z: https://bugs.webkit.org/show_bug.cgi?id=61824

Zasadniczo, gdy zastosujesz transformację 3D na osi z, indeks z nie może być już uwzględniony (jesteś teraz na trójwymiarowej płaszczyźnie renderowania, użyj różnych wartości z). Jeśli chcesz wrócić do renderowania 2D dla elementów podrzędnych, użyj transform-style: flat;.

Jest to z całą pewnością związane z błędem zauważonym przez samy-delux. Powinno to dotyczyć tylko tych elementów, które są pozycjonowane jako bezwzględne lub względne. Aby rozwiązać ten problem, możesz zastosować następującą instrukcję css do każdego elementu, który jest umieszczony w ten sposób i powoduje problemy:

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

Spowoduje to zastosowanie przekształcenia do elementu bez faktycznego wykonywania transformacji, ale wpłynie na jego kolejność renderowania, tak aby znajdował się nad elementem powodującym problem.

Trochę późno, ale spróbuj umieścić elementy, które straciły indeks Z, umieszczając następujące, miałem problem podczas wykonywania ostatnio paralaksy i to bardzo pomogło.

transform-style: preserve-3d;

Oszczędza to nakładania

transform: translate3d(0,0,0);

Na innych elementach, które bardziej obciążają GPU

Czekam na przykład

Czy próbowałeś wykonać skalę transformacji (1)? Pamiętam, że miałem podobny problem i musiałem zmienić kolejność elementów w html i użyć transformacji, której nie potrzebowałem tylko dlatego, że zmienił się indeks Z użycia transformacji.

Jeśli się nie mylę, za każdym razem, gdy używasz transformacji, staje się ona najwyższym dostępnym indeksem z, a jest on uporządkowany według najbliższego elementu html znajdującego się na początku tagu. A więc od góry do dołu.

Mam nadzieję, że ta pomoc

z-index będzie działać z elementami div przekształconymi w 3D, jeśli nadasz styl elementowi stosowanemu w stosie -webkit-transform: translateZ(0px);

Fragment na codepen -> http://codepen.io/mrmoje/pen/yLIul

W przykładzie przyciski stack upi stack downpodnoszą i opuszczają indeks Z stopki (+/- 1) względem obracanego elementu (w tym przypadku obraz).

Nie udało mi się odtworzyć opisanego tutaj problemu. Niezależnie od tego, co robię, wartość indeksu z jest zachowywana podczas wszystkich przekształceń. Testuję przy użyciu Chromium (Google Chrome).

Trzeci argument funkcji translate3d manipuluje osią z elementu. Koncepcja jest podobna, ale nie dokładnie taka sama, jak w przypadku indeksu z ... Elementy o niższej osi z znajdują się pod elementami o wyższej wartości.

Wiem, że wypróbowałeś wartości trzeciego argumentu, aby pasowały do ​​zamierzonego indeksu z, ale problem polega na tym, że oś z nie wydaje się zmieniać podczas animacji CSS3. W poniższym przykładzie element najechany kursorem powinien znajdować się na górze, ale #element_a pozostaje na górze.

Jeśli dodam indeks z zarówno do zwykłego selektora, jak i do selektora: hover, wydaje się, że działa i pozwala na umieszczenie elementu na górze.

Chociaż nie jest to dokładnie to, czego szukałeś, to zachowanie zapewnia rozwiązanie. Wystarczy użyć translate3d i z-index, aby ustawić kolejność początkowego renderowania.

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

Innym sposobem obejścia tego jest to, że możesz utworzyć element nadrzędny i zastosować wszystkie inne przejścia z nim związane:

# 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