web-dev-qa-db-de.com

iPhone WebKit-CSS-Animationen verursachen Flimmern

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 Pistolen scrollen hinein. Sie können die Handtasche und das Zubehör auf und ab scrollen. Sie können sehen, dass sie beim Loslassen einrasten. In dem Moment, in dem 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. Die Transformation ist der einzige Weg, auf dem ich Dinge bewegen kann.

Das größte Problem ist jedoch, wenn Sie auf "Artikel anpassen" und dann auf "Wiederholen" klicken. Sie werden sehen, wie die Waffen animiert werden. Der gesamte Hintergrund der Accessoires/Geldbörsen wird weiß. Kann mich jemand bitte mit einigen Einsichten ausstrahlen, warum dies passiert?

78
Jake Chapa

Ich habe -webkit-backface-visiblity hinzugefügt und das hat vor allem geholfen, aber ich hatte nach dem Neuladen der Seite noch ein anfängliches Flimmern. Als ich -webkit-perspective: 1000 hinzufügte, gab es keinerlei Flimmern.

-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
125
Wes Baker

Versuchen Sie dies und hoffentlich hilft es:

#game {
  -webkit-backface-visibility: hidden;
}
39
donohoe
body {-webkit-transform:translate3d(0,0,0);}
17
Brian D'Astous

Die eigentliche Antwort für meinen Fall ist hier. Jemand war nah dran mit: -webkit-backface-visible: hidden; Aber die eigentliche Antwort ist -webkit-backface-visible: hidden; muss zum parent div hinzugefügt werden.

12
Johan De Silva

Ich hatte auch ein Problem mit einem "flackernden" CSS-Übergang. Bei der fraglichen Animation handelte es sich um ein Menü, das von außerhalb des Bildschirms abrutschte, und als die Animation beendet war, blitzte/blitzte das gesamte Menü.

Wie sich herausstellte, wurde dies durch ein aktuelles iOS-Feature verursacht, das "tap highlight" , das aus irgendeinem Grund nach dem Ende der CSS-Animation (dh nach dem eigentlichen Tippen) stattfand und stattdessen das gesamte Menü hervorhob von nur dem Element, das angetippt wurde. Ich habe das Problem "behoben", indem Sie das Tap-Highlight vollständig deaktivieren, wie in here beschrieben:

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

Michaels Antwort-webkit-backface-visibility: hidden; hat funktioniert, als wir dieses Problem gefunden haben. Wir hatten translateZ(0px) in unserem <body>-Tag, um einen IFRAME-Begrenzungsfehler in iOS 3.1.3 und früher zu verhindern. Durch das Hinzufügen von -webkit-backface-visibility: hidden; zu jedem Element, das wir animierten, wurde das Flimmern behoben. Lebensretter.

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

ich bemerkte, wenn ich einen Schwebeflugzustand in einem div hatte, würde die Seite flackern, auch wenn ich keine CSS oder Js angeschlossen habe. Vielleicht hilft das jemand anderem.

3
Jesse

Wenn jemand feststellt, dass die Sicht nach hinten nicht funktioniert, können Sie die Eigenschaften Ihres animierten Elements bereits überprüfen. Für uns haben wir festgestellt, dass overflow-y: scroll auf einem absolute- oder fixed-positionierten Element unter iOS starkes Flackern verursacht hat.

Einfach overflow-y: scroll entfernt, behoben.

3
KendallB

Obwohl ich -webkit-transform-style: preserve-3d; und -webkit-backface-visibility: hidden hatte, passierte das Flimmern immer noch.

In meinem Fall war die Ursache der z-index. Die Erhöhung auf Active Element hat geholfen.

1
Morpheus

Also habe ich eine Lösung für dieses Problem gefunden, bei der keine andere richtig funktioniert hat.

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 z-index für Ihr animiertes Element auf> 1 ein. Dadurch werden iOS-Geräte dazu verleitet, die Animation anders zu rendern, und das Flimmern in meinem Szenario wird vermieden. Das Anpassen der Z-Index-Werte kann hilfreich sein, wenn diese Lösung nicht direkt funktioniert.

0
Colin

Anstatt den Übergang auf "alle" anzuwenden, geben Sie einfach den gewünschten Übergang an. Es entfernte das Flackern in meinem Fall.

0
Sylvestre Lucia

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à! So glatt wie Butter.

Dies verursacht Flimmern:

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

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

Ich habe beim Durchführen eines Folienübergangs beim Verwenden eines Standard-Webbrowsers von Android ein Flackern festgestellt.

Ich habe folgende Übergangs-CSS verwendet:

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

Keine der in diesem Thread erwähnten Problemumgehungen hat dazu beigetragen, das Problem zu lösen. Endlich habe ich die Lösung gefunden. Die Quelle des Flimmerns ist das Schlüsselwort all , das alle möglichen Übergänge ausführt. Ich habe es so geändert, dass nur die Transformation ausgeführt wird und das Problem behoben wurde:

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

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 dadurch verursacht, dass der Browser zwischen Hardware- und Software-Rendering wechselt. Und ich denke, dass Browserhersteller sich über yea olde "translate3d (0,0,0)" bewusst sind, um Hardware-Rendering zu erzwingen - daher ignorieren sie diese falschen Werte jetzt.

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

Jedenfalls arbeitete ich für mich.

0
bob

Ich habe all das ausprobiert und hatte immer noch flackernde Probleme mit Firefox und Chrome. Ich habe es behoben oder zumindest stark reduziert, indem ich die Box-Shadow-Transformation entfernte, die während der Animation viele Neulackierungen verursachte. Ich folgte dem und modifizierte für meine Bedürfnisse:

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

0
d1ch0t0my

Für mich war es wichtig, die Zuweisung der CSS-Regel "transform-translate" 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;irgendwas für mich nicht getan hat.

0
WoodrowShigeru

Versuchen Sie diese Lösung. Es funktioniert für mich in Phonegap + jQM 1.4.0:

Ändern Sie diesen <meta name="viewport" content="width=device-width, initial-scale=1">

Stattdessen:

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

Lesen Sie hier mehr: http://www.fishycode.com/post/40863390300/fixing-jquery-mobiles-none-transition-flicker-in

0
Baked Inhalf

für mich wurde ein flackerndes Problem auf Safari gelöst, indem will-change: transform; auf dem animierten Element entfernt wurde.

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

0
Mohsen.Khakbiz

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. Stellen Sie mit anderen Worten sicher, dass sich zu keinem Zeitpunkt in Ihren Ansichten ein Element befindet, das keinen Hintergrund hat.

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

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

0
kenorvick