Zapobiegaj migotaniu na webkit-Przejście webkit-transform [duplikat]
Możliwy duplikat:
iphone webkit animacje css powodują migotanie
Z jakiegoś powodu, tuż przed pojawieniem się mojej animacji właściwości WebKit-transform, pojawia się lekkie migotanie. Oto co robię:
CSS:
#element {
-webkit-transition: -webkit-transform 500ms;
}
JavaScript:
$("#element").css("-webkit-transform", "translateX(" + value + "px)");
Update: this występuje tylko w Safari. Nie dzieje się to w Chrome, chociaż animacja działa.
8 answers
Rozwiązanie jest wymienione tutaj: iPhone WebKit animacje CSS powodują migotanie.
Dla Twojego elementu, musisz ustawić
-webkit-backface-visibility: hidden;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:18:24
Reguła:
-webkit-backface-visibility: hidden;
Nie będzie działać dla sprite ' ów ani tła obrazów.
body {-webkit-transform:translate3d(0,0,0);}
Wkręca tła, które są wyłożone kafelkami.
Wolę zrobić klasę o nazwie no-flick i zrobić to:
.no-flick{-webkit-transform:translate3d(0,0,0);}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-10-11 23:55:05
Dodaj tę właściwość css do migotanego elementu:
-webkit-transform-style: preserve-3d;
(i wielkie podziękowania dla Nathana Hoada: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit )
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-28 00:28:45
Musiałem użyć:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Na elemencie, lub i tak otrzymałbym flickr przy pierwszym przejściu po załadowaniu strony
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-09 18:50:32
Aby uzyskać bardziej szczegółowe wyjaśnienie, sprawdź ten post:
Http://www.viget.com/inspire/webkit-transform-kill-the-flash/
Zdecydowanie uniknęłabym stosowania go na całe ciało. Kluczem jest upewnienie się, że każdy konkretny element, który planujesz przekształcić w przyszłości, zaczyna się od renderowania w 3d, aby przeglądarki nie musiały przełączać się w trybach renderowania. Dodawanie-webkit-transform: translateZ(0)
(lub jedna z opcji już wymienionych) do animowanego elementu będzie / align = "left" /
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-01-20 21:32:36
Odkryłem, że zastosowanie {[0] } do elementu translującego i -webkit-transform: translate3d(0,0,0); do wszystkich jego dzieci, migotanie znika
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-02 22:14:12
Uruchamia renderowanie z akceleracją sprzętową dla problematycznego elementu. Radziłbym nie robić tego na znacznikach *, body lub html dla wydajności.
.problem{
-webkit-transform:translate3d(0,0,0);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-12 14:38:48
Obie powyższe odpowiedzi działają dla mnie z podobnym problemem.
Jednak podejście body {- webkit-transform} powoduje, że wszystkie elementy na stronie są efektywnie renderowane w 3D. nie jest to najgorsza rzecz, ale nieznacznie zmienia renderowanie tekstu i innych elementów w stylu CSS.
To może być efekt, który chcesz. Może to być przydatne, jeśli wykonujesz lot przekształcenia na swojej stronie. W przeciwnym razie-webkit-backface-visibility: hidden on the element your transforming jest najmniej inwazyjną opcją.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-07-15 14:26:14