Używam -webkit-transform (i -moz-transform / -o-transform), aby obrócić element div. Dodano również ustaloną pozycję, aby div był przewijany razem z użytkownikiem.
W Firefoksie działa dobrze, ale w przeglądarkach opartych na webkitach jest zepsuty. Po użyciu -webkit-transform, ustalona pozycja już nie działa! Jak to możliwe?
html
css
positioning
rotation
iSenne
źródło
źródło
Odpowiedzi:
Po pewnych badaniach w witrynie Chromium pojawił się raport o błędzie dotyczący tego problemu, jak dotąd przeglądarki Webkit nie mogą renderować tych dwóch efektów jednocześnie.
Sugerowałbym dodanie CSS tylko do Webkit do twojego arkusza stylów i przekształcenie przekształconego div w obraz i użycie go jako tła.
Więc na razie będziesz musiał to robić w staromodny sposób, dopóki przeglądarki Webkit nie dogonią FF.
EDYCJA: Od 24.10.2012 błąd nie został rozwiązany.
Wydaje się, że nie jest to błąd, ale aspekt specyfikacji ze względu na dwa efekty wymagające oddzielnych układów współrzędnych i kolejności układania. Jak wyjaśniono w tej odpowiedzi .
źródło
Specyfikacja CSS Transforms wyjaśnia to zachowanie. Elementy z transformacjami działają jak blok zawierający elementy potomne o ustalonej pozycji, więc position: fixed pod czymś z transformacją nie ma już stałego zachowania.
Działają po zastosowaniu do tego samego elementu; element zostanie ustawiony jako stały, a następnie przekształcony.
źródło
Dla każdego, kto stwierdzi, że ich obrazy tła znikają w Chrome z powodu tego samego problemu z załączaniem w tle: naprawiono; - to było moje rozwiązanie:
źródło
Coś (trochę zepsuty), które zadziałało dla mnie, to
position:sticky
zamiast tego:źródło
Sierpień 2016 i naprawiona pozycja i animacja / transformacja nadal stanowią problem. Jedynym rozwiązaniem, które mi się sprawdziło - było stworzenie animacji dla elementu podrzędnego, która zajmuje więcej czasu.
źródło
Właściwie znalazłem inny sposób naprawienia tego „błędu”:
Mam element kontenera, który zawiera stronę z animacjami css3. Gdy strona zakończyła animację, właściwość css3 ma wartość: transform: translate (0,0) ;. Właśnie usunąłem tę linię i wszystko działało tak, jak powinno - pozycja: naprawiona wyświetla się poprawnie. Kiedy do tłumaczenia strony jest stosowana klasa css, dodawana jest właściwość translate i działała również animacja css3.
Przykład:
Demo: http://jsfiddle.net/ZWcD9/
źródło
w moim projekcie phonegap webkit transform -webkit-transform: translateZ (0); działał jak urok. To już działało w Chrome i Safari, ale nie w przeglądarce mobilnej. może być też jeszcze jeden problem, w niektórych przypadkach WRAPPER DIV nie są ukończone. stosujemy czystą klasę w przypadku pływających DIV.
źródło
Prawdopodobnie z powodu błędu w Chrome, ponieważ nie mogę replikować w Safari ani Firefox, ale działa to w Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output
Jest to bardzo szczególna struktura, więc w żadnym wypadku nie jest to uniwersalna poprawka CSS w jednym wierszu, ale być może ktoś może przy niej majstrować, aby działała w Safari i Firefox.
źródło
Miałem ten problem, próbując zaimplementować reakcję kolorów z widokami reagowania na przesuwanie (rsw). Problem dla mnie polegał na tym, że rsw dotyczy
translate(-100%, 0)
panelu zakładek, który przerywa domyślny element div o stałej pozycji dodany na pełnym ekranie, który po kliknięciu zamyka model próbnika kolorów.Dla mnie rozwiązaniem było zastosowanie odwrotnej transformacji do stałego elementu (w tym przypadku
translate(100%, 0)
rozwiązało to mój problem. Nie jestem pewien, czy jest to przydatne w innych przypadkach, ale pomyślałem, że i tak się podzielę).Oto przykład pokazujący to, co opisałem powyżej:
https://codepen.io/relativemc/pen/VwweEez
źródło
Dodanie
-webkit-transform
do stałego elementu rozwiązało problem.źródło
translateZ(0)
NIE działa. To prawda, że czasami działa, widziałem sytuacje, w których działało. Ale nadal nie mogę tego zawęzić.Oto, co działa dla mnie na wszystkich przetestowanych przeglądarkach i urządzeniach mobilnych (Chrome, IE, Firefox, Safari, iPad, iPhone 5 i 6, Android).
źródło
źródło
Jeśli możesz użyć javascript jako opcji, może to być obejściem w celu umieszczenia elementu o ustalonej pozycji względem okna, gdy znajduje się on wewnątrz przekształconego elementu:
To prawda, że będziesz musiał również dostosować wysokość i szerokość, ponieważ
fixedEl
będziesz obliczać to na podstawie kontenera. To zależy od twojego przypadku użycia, ale pozwoli ci to przewidzieć ustalenie pozycji czegoś, niezależnie od tego, jaki jest to kontener.źródło
Dodaj klasę dynamiczną podczas transformacji elementu.
$('#elementId').addClass('transformed')
. Następnie zadeklaruj w css,następnie
następnie
Now position: fixed, gdy podano wartości właściwości top i z-index w elemencie podrzędnym, po prostu działa dobrze i pozostaje niezmienne do momentu transformacji elementu nadrzędnego. Kiedy transformacja zostanie cofnięta, element potomny wyskakuje jako naprawiony ponownie. Powinno to złagodzić sytuację, jeśli faktycznie używasz bocznego paska nawigacji, który otwiera się i zamyka po kliknięciu, a masz zestaw zakładek, który powinien pozostać lepki podczas przewijania strony.
źródło
w moim przypadku okazało się, że nie możemy użyć transform: translateX () przed transform: translateY (). jeśli chcemy użyć obu, powinniśmy użyć transform: translate (,).
źródło
Proszę nie głosować, ponieważ nie jest to dokładna odpowiedź, ale może komuś pomóc, ponieważ jest to szybki sposób na wyłączenie transformacji. Jeśli naprawdę nie potrzebujesz transformacji rodzica i chcesz, aby Twoja stała pozycja znów działała:
źródło