iPhone WebKit CSS-Animationen verursachen Flimmern

83

Dies ist die iPhone-Site: http://www.thevisionairegroup.com/projects/accessorizer/site/

Nachdem Sie auf "Jetzt spielen" geklickt haben, gelangen Sie zu einem Spiel. Die Waffen rollen nach innen. Sie können die Geldbörse und das Zubehör nach oben und unten scrollen. Sie können sehen, dass sie beim Loslassen einrasten. Gerade als dieser Schnappschuss passiert, tritt ein Flimmern auf. Die einzigen Webkit-Animationen, die ich verwende, sind:

'-webkit-transition': 'none'

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

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

Ich wähle entweder den ersten oder den zweiten Übergang, je nachdem, ob ich ihn animieren möchte oder nicht, und die Transformation ist die einzige Möglichkeit, Dinge zu bewegen.

Das größte Problem ist jedoch, wenn Sie auf "Elemente abgleichen" und dann auf "Erneut abspielen" klicken. Sie werden sehen, wie die Waffen animiert werden, der gesamte Hintergrund des Zubehörs / der Geldbörsen wird weiß. Kann mir bitte jemand einen Einblick geben, warum dies geschieht?

iphone css animation webkit flicker Jake Chapa
quelle

Antworten:

126

Ich fügte hinzu -webkit-backface-visiblityund das half meistens, aber ich hatte immer noch ein erstes Flackern, nachdem ich die Seite neu geladen hatte. Als ich hinzufügte -webkit-perspective: 1000, gab es überhaupt kein Flackern.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Wes Baker
quelle
20
Was ist die Magie hinter 1000? Funktioniert möglicherweise ein anderer Wert (> 0)?
cYrus
HINWEIS: Dadurch reagiert die Animation nicht auf Mausereignisse unter Windows Chrome v19: In der Praxis gibt es kein Flimmern, aber die Animation startet nicht immer (beim
Bewegen der
Mein Problem wurde behoben: Das einfache Animations-Div wurde beim Start der Animation in Chrome 25 um 1 Pixel nach links verschoben, war aber in Safari 6.0.2 und Canary 27 in Ordnung. Ich bin froh, dass es funktioniert, wünschte, ich hätte verstanden, warum.
Joemaller
1
HINWEIS: Durch Hinzufügen der Sichtbarkeit der Rückseite wird die Farbwiedergabe geändert. Hier ist ein Beispiel mit Ein-
Tamik Soziev
3
Ich hatte dieses Problem mit flackerndem Text, als ich versuchte, Linkelemente zu wechseln. Durch Ändern der Sichtbarkeit der Rückseite wurde das Anti-Aliasing geändert, wodurch die Schrift sehr dünn wurde. Behoben durch die Verwendung von -webkit-font-Smoothing: Subpixel-Antialias;
Dan
39

Versuchen Sie dies und hoffentlich hilft es:

#game {
  -webkit-backface-visibility: hidden;
}
Donohoe
quelle
2
Dies funktioniert in der Safari-Standardeinstellung hervorragend, schlägt jedoch im Standalone-Modus fehl. Hast du eine Idee?
cYrus
18 
body {-webkit-transform:translate3d(0,0,0);}
Brian D'Astous
quelle
Dies hat es für mich getan. Allerdings musste ich es auf ein #wrapperElement anwenden, da das Aufbringen auf den Körper das Layout vermasseln würde.
AdamJLev
Wenn jemand die Rückseite sehen möchte "-webkit-backface-sichtbarkeit: versteckt;" hat nicht funktioniert, aber dieser ist perfekt. Vielen Dank!
Nachtgold
perfekt. -webkit-backface-visibility: hidden;verursachte, dass alle Skalentransformationen verschwommen waren. body {-webkit-transform:translate3d(0,0,0);}arbeitete ein Vergnügen.
Liam
Ich versuche es, aber es funktioniert nicht für mich. Hier ist ein Code-Snippet: codeply.com/go/g7Zp98paz5
Fran_gg7
1
Das hat bei mir funktioniert. In meinem Fall scale(1)verursachte das Flimmern.
Vielen
12

Die eigentliche Antwort für meinen Fall ist hier. Jemand war nah dran an: -webkit-backface-sichtbarkeit: versteckt; Die eigentliche Antwort lautet jedoch: Webkit-Backface-Sichtbarkeit: versteckt; muss zum übergeordneten div hinzugefügt werden .

Johan De Silva
quelle
Ich musste tatsächlich -webkit-backface-visibility: hidden;das übergeordnete Div, das animierte Div UND die Kinder des animierten Div hinzufügen . Sobald ich das getan habe, hat es einwandfrei funktioniert.
Mattstuehler
2
Ich denke, das hat auch mein Flimmern behoben, indem ich es dem Elternteil hinzugefügt habe. Was macht es eigentlich?
Chovy
Durch Hinzufügen zum übergeordneten Element wird jedoch die "feste" Position auf den untergeordneten Elementen rückgängig gemacht :(
James
11

Ich hatte auch ein Problem mit einem "flackernden" CSS-Übergang. Die fragliche Animation war ein Menü, das von außerhalb des Bildschirms eingeblendet wurde, und als die Animation beendet war, blitzte / flackerte das gesamte Menü.

Wie sich herausstellte, wurde dies durch eine tatsächliche iOS-Funktion verursacht, das "Tap Highlight" , das aus irgendeinem Grund nach Abschluss der CSS-Animation (dh weit nach dem eigentlichen Tap) aktiviert wurde und das gesamte Menü anstelle nur des Elements hervorhob das wurde abgehört. Ich habe das Problem "behoben", indem ich Tap-Highlight vollständig deaktiviert habe, wie hier beschrieben :

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

Michaels Antwort -webkit-backface-visibility: hidden; funktionierte, als wir auf dieses Problem stießen. Wir hatten translateZ(0px)auf unserem <body>Tag, um einen IFRAMEGrenzfehler von iOS 3.1.3 und früher zu verhindern, und es verursachte, dass Animationen flackerten. Durch Hinzufügen -webkit-backface-visibility: hidden;zu jedem von uns animierten Element wurde das Flimmern behoben! Lebensretter.

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

Ich bemerkte, wenn ich einen Schwebezustand auf einem Div hatte, flackerte die Seite, selbst wenn ich kein CSS oder JS daran hatte. Vielleicht hilft das jemand anderem.

Jesse
quelle
für mich hat dieser den Trick gemacht. Die anderen waren nur relevant, wenn Übergänge vorhanden waren.
Nadav
3

Wenn jemand feststellt, dass die Sichtbarkeit der Rückseite nicht funktioniert, können Sie sich die Eigenschaften ansehen, die sich bereits in Ihrem animierten Element befinden. Bei uns stellten wir fest, dass overflow-y: scrollein absoluteoder ein fixedpositioniertes Element unter iOS zu starkem Flackern führte.

Einfach entfernen overflow-y: scrollbehoben.

KendallB
quelle
Das Entfernen overflow-y: scrollhat meinem Fall geholfen. Ich danke dir sehr!
YemSalat
Es ist wahrscheinlich auch mein Fall. aber ich kann den Überlauf und die absolute Position für dieses Element nicht entfernen. irgendeine Idee?
Kobi Cohen
1

Obwohl ich hatte -webkit-transform-style: preserve-3d;und -webkit-backface-visibility: hiddendas Flackern immer noch passierte.

In meinem Fall war die Ursache die z-index. Das Erhöhen des aktiven Elements hat geholfen.

Morpheus
quelle
0

Hier ist eine neue Lösung. Ich habe das Hintergrundbild mit jQuery eingestellt, und keiner der 3D-Rendering-Tricks hat funktioniert. Also habe ich versucht, stattdessen Klassen zu verwenden, um die Eigenschaften zu definieren. Voilà! Glatt wie Butter.

Dies verursacht Flimmern:

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

Tun Sie stattdessen:

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

mit definierten Klassen:

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

Ich hatte viel Zeit damit verbracht, dieses Problem für Ember Animated Outlets, Phonegap und iOS- Setup herauszufinden .

Obwohl einfach, musste ich jedem übergeordneten Element der obersten Ebene, das in den CSS-Animationen enthalten war, einen Hintergrund hinzufügen. Mit anderen Worten, stellen Sie sicher, dass zu keinem Zeitpunkt in Ihren Ansichten ein Element vorhanden ist, das keinen Hintergrund hat.

Mein Setup war dies für jede Vorlage und allen drei Elementen wurde eine Hintergrundfarbe zugewiesen:

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

Kenorvick
quelle
0

Anstatt den Übergang auf "alle" anzuwenden, geben Sie einfach den an, den Sie wirklich benötigen. Es entfernte das Flackern auf meinem Fall.

Sylvestre Lucia
quelle
0

Ich habe alles versucht und hatte immer noch große Probleme mit dem Flackern von Firefox und Chrome. Ich habe es behoben oder zumindest stark auf ein akzeptables Problem reduziert, indem ich die Box-Shadow-Transformation entfernt habe, die während der Animation viele Neulackierungen verursacht hat. Ich folgte diesem und modifizierte für meine Bedürfnisse:

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

d1ch0t0my
quelle
0

Für mich wurde das flackernde Problem auf der Safari gelöst, indem will-change: transform;das animierte Element entfernt wurde.

Ich könnte dieses Problem auch lösen, indem ich overflow: hidden;es dem übergeordneten Element hinzufüge , aber damit wurden alle Elemente mit transform: translateZ()unwirksam

Mohsen.Khakbiz
quelle
0

Ich musste einen tatsächlichen Wert (anstelle von 0) verwenden:

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

Beispiel:

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

Nach dem, was ich gelesen habe , wird das Flimmern durch das Umschalten des Browsers zwischen Hardware- und Software-Rendering verursacht. Und ich denke, Browserhersteller sind sich der alten "translate3d (0,0,0)" bewusst, um das Hardware-Rendering zu erzwingen - daher ignorieren sie diese gefälschten Werte möglicherweise jetzt.

=> Die Verwendung eines tatsächlichen Wertes kann dazu führen, dass Dinge "hängen bleiben".

Jedenfalls hat für mich gearbeitet.

Bob
quelle
0

Beim Ausführen eines Folienübergangs bei Verwendung eines Standard-Android-Webbrowsers ist ein Flackern aufgetreten.

Ich habe die folgende Übergangs-CSS verwendet:

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

Keine der in diesem Thread erwähnten Problemumgehungen hat zur Lösung des Problems beigetragen. Endlich habe ich die Lösung gefunden. Die Quelle des Flackerns ist das Schlüsselwort all , mit dem alle möglichen Übergänge ausgeführt werden. Ich habe es geändert, um nur die Transformation durchzuführen, und das Problem wurde behoben:

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

Was es für mich behoben hat, war, die Zuweisung der Transform-Translate-CSS-Regel zu verzögern. Etwas wie das:

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

… Weil -webkit-backface-visibility: hidden;ich nichts für mich getan habe .

WoodrowShigeru
quelle
0

Also habe ich eine Lösung für dieses Problem gefunden, bei der keine anderen richtig funktionierten.

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>

Stellen Sie dann das z-indexfür Ihr animiertes Element auf> 1 ein. Dies bringt iOS-Geräte irgendwie dazu, die Animation anders zu rendern, und vermeidet das Flimmern in meinem Szenario. Das Anpassen von Z-Index-Werten kann hilfreich sein, wenn diese Lösung nicht sofort funktioniert.

Colin
quelle
0

UPDATE 2019

Sie können das Flackern aktivieren, indem Sie diese Regeln einfach zu Ihrem Element hinzufügen, für das der Übergang verwendet wird.

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

Arbeitete für mich an Safarai

Freestyle09
quelle