Animacje CSS w iPhone WebKit powodują migotanie

83

To jest witryna iPhone: http://www.thevisionairegroup.com/projects/accessorizer/site/

Po kliknięciu „zagraj teraz” przejdziesz do gry. Pistolety przewiną się. Możesz przewijać torebkę i akcesoria w górę iw dół. Możesz zobaczyć, że kiedy puścisz, zatrzaskują się na miejscu. Tak jak to się dzieje, pojawia się migotanie. Jedyne animacje webkitów, których używam, to:

'-webkit-transition': 'none'

'-webkit-transition': 'all 0.2s ease-out'

'-webkit-transform': 'translate(XXpx, XXpx)'

Wybieram pierwsze lub drugie przejście w zależności od tego, czy chcę, aby było animowane, a transformacja to jedyny sposób, w jaki poruszam się po nim.

Największym problemem jest jednak to, że klikniesz „Dopasuj elementy”, a następnie klikniesz „Odtwórz ponownie”. Zobaczysz, jak ożywają się pistolety, całe tło akcesoriów / toreb staje się białe. Czy ktoś może mnie promieniować jakimś wglądem, dlaczego tak się dzieje?

— Jake Chapa
źródło

126

Dodałem -webkit-backface-visiblityi to głównie pomogło, ale po ponownym załadowaniu strony nadal miałem początkowe migotanie. Kiedy dodałem -webkit-perspective: 1000, nie było żadnego migotania.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

— Wes Baker
źródło

21

Jaka magia kryje się za 1000? Czy może zadziałać jakakolwiek inna wartość (> 0)?

— cYrus,

UWAGA: powoduje to, że animacja nie reaguje na zdarzenia myszy w systemie Windows chrome v19: w praktyce nie ma migotania, ale animacja nie zawsze się uruchamia (po najechaniu myszą lub cokolwiek innego)

— skyline

1

UWAGA: dodanie widoczności z tyłu zmieni renderowanie kolorów. Oto przykład z włączaniem i wyłączaniem widoczności tylnej ściany

— Tamik Soziev

3

Miałem ten problem z migotaniem tekstu podczas próby przejścia elementów linków. Zmiana widoczności tylnej ściany spowodowała zmianę antyaliasingu, sprawiając, że czcionka była naprawdę cienka. Naprawiono przez użycie -webkit-font-smoothing: subpixel-antialiased;

— Dan

1

@cYrus Chyba nigdy się nie dowiemy

— Denny

39

Spróbuj tego i miejmy nadzieję, że pomoże:

#game {
  -webkit-backface-visibility: hidden;
}

— donohoe
źródło

2

Działa to świetnie w domyślnym Safari, ale kończy się niepowodzeniem w trybie samodzielnym. Czy masz jakies pomysły?

— cYrus,

18

body {-webkit-transform:translate3d(0,0,0);}

— Brian D'Astous
źródło

Zrobiło to dla mnie ... jednak musiałem go nałożyć na #wrapperelement, ponieważ nałożenie na korpus zepsułoby układ.

— adamJLev

Jeśli ktoś chce zobaczyć backface "-webkit-backface-visibility: hidden;" nie działa, ale ten jest doskonały. Dzięki!

— Nachtgold

doskonały. -webkit-backface-visibility: hidden;spowodowało rozmycie wszelkich zmian skali. body {-webkit-transform:translate3d(0,0,0);}zadziałało.

— Liam

Próbuję, ale to nie działa. Oto fragment kodu: codeply.com/go/g7Zp98paz5

— Fran_gg7

1

To zadziałało dla mnie. W moim przypadku scale(1)spowodowało migotanie. wielkie dzięki

— jansesun

12

Właściwa odpowiedź na mój przypadek jest tutaj. Ktoś był blisko z: -webkit-backface-visibility: ukryty; Ale prawdziwa odpowiedź brzmi: -webkit-backface-visibility: hidden; należy dodać do nadrzędnego div.

— Johan De Silva
źródło

Właściwie musiałem dodać -webkit-backface-visibility: hidden;do nadrzędnego elementu DIV, animowanego DIV ORAZ elementów podrzędnych animowanego DIV. Kiedy to zrobiłem, działało bezbłędnie.

— mattstuehler

2

Myślę, że to też naprawiło moje migotanie, dodając je do rodzica. Co to właściwie robi?

— chovy

Dodanie go do rodzica cofa jednak „ustaloną” pozycję na elementach podrzędnych :(

— James,

11

Miałem również problem z "migoczącym" przejściem CSS. Animacja, o której mowa, była menu wysuwającym się z ekranu, a po zakończeniu animacji całe menu migotało / migotało.

Jak się okazało, było to spowodowane faktyczną funkcją iOS, "podświetleniem dotknięcia" , które z jakiegoś powodu włączyło się po zakończeniu animacji CSS (tj. Daleko po faktycznym dotknięciu) i podświetliło całe menu zamiast tylko elementu który został nagrany. „Rozwiązałem” problem, całkowicie wyłączając podświetlanie dotknięciem, jak opisano tutaj :

-webkit-tap-highlight-color: rgba(0,0,0,0);

— fresskoma
źródło

5

Odpowiedź Michaela -webkit-backface-visibility: hidden; zadziałała, kiedy napotkaliśmy ten problem. Mieliśmy translateZ(0px)na naszym <body>tagu, aby zapobiec IFRAMEbłędowi granic w iOS 3.1.3 i wcześniejszych, który powodował migotanie animacji. Dodanie -webkit-backface-visibility: hidden;do każdego animowanego elementu naprawiło migotanie! Oszczędza życie.

— Rob Barreca
źródło

3

div { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }

Zauważyłem, że po najechaniu na element div strona będzie migotać, nawet jeśli nie mam dołączonego do niej żadnego css ani js. może to pomoże komuś innemu.

— Jesse
źródło

dla mnie to załatwiło sprawę. inne były istotne tylko wtedy, gdy miały miejsce przejścia.

— Nadav

3

Jeśli ktoś stwierdzi, że widoczność od tyłu nie działa, możesz spojrzeć na właściwości już w animowanym elemencie. W naszym przypadku odkryliśmy, że overflow-y: scrollelement absolutelub fixedumieszczony element powodował duże migotanie w systemie iOS.

Po prostu usunięcie overflow-y: scrollgo naprawiło.

— KendallB
źródło

Usunięcie overflow-y: scrollpomogło w mojej sprawie. Dziękuję bardzo!

— YemSalat

To prawdopodobnie moja sprawa. ale nie mogę usunąć przepełnienia-y nore pozycji absolutnej dla tego elementu. dowolny pomysł?

— Kobi Cohen

1

Mimo że miałem -webkit-transform-style: preserve-3d;i -webkit-backface-visibility: hiddenmigotanie wciąż się działo.

W moim przypadku przyczyną był z-index. Zwiększenie go na aktywnym elemencie pomogło.

— Morfeusz
źródło

0

Oto nowe rozwiązanie. Ustawiałem obraz tła za pomocą jQuery i żadna ze sztuczek renderowania 3D nie działała. Dlatego zamiast tego spróbowałem użyć klas do zdefiniowania właściwości. Voilà! Gładka jak masło.

Powoduje to migotanie:

$('#banner').css('backgroundImage', 'url("slide_1.jpg")';

Zamiast tego zrób:

$('#banner').attr('class', '.slide-1');

ze zdefiniowanymi klasami:

#banner { -webkit-transition: background-image .25s; }
.slide-1 { background-image: url("slide_1.jpg"); }
.slide-2 { background-image: url("slide_2.jpg"); }

— mattwad
źródło

0

Wypróbuj to rozwiązanie . U mnie działa w Phonegap + jQM 1.4.0 :

Zmień to <meta name="viewport" content="width=device-width, initial-scale=1">

Zamiast tego:

<meta name="viewport" content="width=device-width, user-scalable=no" />

Przeczytaj więcej tutaj: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

— Pieczone Inhalf
źródło

0

Spędziłem dużo czasu, próbując rozwiązać ten problem dla Ember Animated Outlets, Phonegap i konfiguracji iOS .

Choć było to proste, musiałem dodać tło do każdego elementu nadrzędnego najwyższego poziomu, który był zawarty w animacjach CSS. Innymi słowy, upewnij się, że w żadnym punkcie Twoich widoków nie ma elementu, który nie ma tła.

Moja konfiguracja była taka dla każdego szablonu i wszystkie trzy elementy miały przypisany kolor tła:

<header></header> <body class="content"></body> <footer></footer>

— kenorvick
źródło

0

Zamiast stosować przejście do „wszystkich”, po prostu określ to, czego naprawdę potrzebujesz. Usunęło migotanie na mojej obudowie.

— Sylvestre Lucia
źródło

0

Wypróbowałem wszystkie powyższe i nadal miałem poważne problemy z migotaniem w przeglądarkach Firefox i Chrome. Naprawiłem to lub przynajmniej znacznie zredukowałem do akceptowalnego problemu, usuwając transformację box-shadow, która powodowała wiele przemalowań podczas animacji. Postępowałem zgodnie z tym i zmodyfikowałem dla swoich potrzeb:

http://tobiasahlin.com/blog/how-to-animate-box-shadow/

— d1ch0t0my
źródło

0

dla mnie problem migotania na safari rozwiązany przez usunięcie will-change: transform;animowanego elementu.

też mógłbym rozwiązać ten problem dodając overflow: hidden;do rodzica, ale z tym wszystkie elementy transform: translateZ()stały się nieskuteczne

— Mohsen.Khakbiz
źródło

0

Musiałem użyć rzeczywistej wartości (zamiast 0):

.no-flick{
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0.1px);
    transform: translateZ(0.1px); /* needs an actual value */
}

Przykład:

<div class="foo no-flick"></div>

Z tego, co przeczytałem , migotanie jest spowodowane przełączaniem przeglądarki między renderowaniem sprzętowym a programowym. I myślę, że producenci przeglądarek są świadomi tak dawnego „translate3d (0,0,0)”, aby wymusić renderowanie sprzętowe - więc mogą teraz ignorować te fałszywe wartości.

=> Użycie rzeczywistej wartości może spowodować, że coś się „przyklei”.

W każdym razie pracował dla mnie.

— pion
źródło

0

Wystąpiło migotanie podczas wykonywania przejścia slajdów podczas korzystania z domyślnej przeglądarki internetowej systemu Android.

Użyłem następującego css przejścia:

-webkit-transition: all 2s;
-webkit-transform: translate(100%,0);

Żadne z obejść wymienionych w tym wątku nie pomogło w rozwiązaniu problemu. Wreszcie znalazłem rozwiązanie. Źródłem migotania jest słowo kluczowe all, które oznacza wykonanie wszystkich możliwych przejść. Zmieniłem to tak, aby wykonywał tylko transformację i problem został rozwiązany:

-webkit-transition: -webkit-transform 2s;
-webkit-transform: translate(100%,0);

— Jusid
źródło

0

Rozwiązaniem tego problemu było opóźnienie przypisania reguły CSS transform-translate. Coś takiego:

HTML:

<div class="animate-this loading"></div>

CSS:

.animate-this {
  &:not(.loading) {
    transform: -webkit-translate(50px);
    transform: translate(50px);
    transition: -webkit-transform 0.3s, transform 0.3s;
  }
}

JavaScript (jQuery):

$(document).ready(function(){
  window.setTimeout(function(){
    $('.animate-this').removeClass('loading');
  }, 250);
});

… Ponieważ nic dla mnie -webkit-backface-visibility: hidden;nie zrobił .

— WoodrowShigeru
źródło

0

Więc znalazłem rozwiązanie tego problemu, w którym żadna inna nie działała poprawnie.

CSS:

.ios-animation-fixer {
  position: fixed;
  width: 100%;
  height: 10px;
  top: -10px;
  background-color: green;
  z-index: 1;
  pointer-events: none;
  visibility: hidden;
}

HTML:

<div class="ios-animation-fixer"></div>

Następnie ustaw z-indexanimowany element na> 1. To w jakiś sposób nakłania urządzenia z systemem iOS do renderowania animacji w inny sposób i pozwala uniknąć migotania w moim scenariuszu. Dostosowanie wartości indeksu z może być pomocne, jeśli to rozwiązanie nie działa poza bramką.

— Colin
źródło

0

UPDATE 2019

Możesz włączyć migotanie, po prostu dodając te reguły do elementu, w którym jest używane przejście.

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

Pracował dla mnie na Safarai

— Freestyle09
źródło