Mam dwa absolutnie ustawione elementy div, które się nakładają. Oba mają ustawione wartości indeksu z za pośrednictwem css. Używam translate3d
WebKit przekształcić animowanie tych elementów z ekranu, a następnie z powrotem na ekran. Po transformacji elementy nie przestrzegają już ustalonych z-index
wartoś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 translate3d
na 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.
Odpowiedzi:
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;
.źródło
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:
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.
źródło
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.
Oszczędza to nakładania
Na innych elementach, które bardziej obciążają GPU
źródło
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
źródło
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 up
istack down
podnoszą i opuszczają indeks Z stopki (+/- 1) względem obracanego elementu (w tym przypadku obraz).źródło
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.
źródło
Innym sposobem obejścia tego jest to, że możesz utworzyć element nadrzędny i zastosować wszystkie inne przejścia z nim związane:
JsFiddle
źródło