Animacje CSS w iPhone WebKit powodują migotanie

Question 1

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?

Question 2

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;

Question 3

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

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

Question 4

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

Question 5

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.

Question 6

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

Question 7

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.

Question 8

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.

Question 9

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.

Question 10

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.

Question 11

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"); }

Question 12

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

Question 13

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>

Question 14

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

Question 15

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/

Question 16

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

Question 17

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.

Question 18

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

Question 19

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

Question 20

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

Question 21

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

Answer 1

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?

Answer 2

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

Answer 3

21

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

cYrus,

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

1

@cYrus Chyba nigdy się nie dowiemy

Denny

Answer 8

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,

Answer 9

2

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

cYrus,

Answer 10

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

Answer 11

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

Answer 12

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

Nachtgold

Answer 13

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

Liam

Answer 14

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

Fran_gg7

Answer 15

1

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

jansesun

Answer 16

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,

Answer 17

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

Answer 18

2

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

chovy

Answer 19

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

James,

Answer 20

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

Answer 21

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.

Answer 22

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

Answer 23

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

Nadav

Answer 24

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

Answer 25

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

YemSalat

Answer 26

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

Kobi Cohen

Answer 27

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.

Answer 28

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"); }

Answer 29

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

Answer 30

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>

Answer 31

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

Answer 32

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/

Answer 33

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

Answer 34

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.

Answer 35

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

Answer 36

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

Answer 37

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

Answer 38

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

Animacje CSS w iPhone WebKit powodują migotanie

Odpowiedzi: