Verhindern Sie Flacker bei Webkit-Übergang von Webkit-Transformationen [Duplikat

Question

Mögliches Duplikat:
iPhone Webkit CSS -Animationen verursachen Flicker

Aus irgendeinem Grund gibt es kurz vor meiner Animation der Webkit-Transform-Eigenschaft ein leichtes Flacker. Hier ist was ich tue:

CSS:

#element {
    -webkit-transition: -webkit-transform 500ms;
}

JavaScript:

$("#element").css("-webkit-transform", "translateX(" + value + "px)");

Kurz bevor der Übergang stattfindet, gibt es einen Flacker. Irgendeine Idee, warum das so ist und wie ich das Problem beheben könnte?

Vielen Dank!

Aktualisieren: Dies tritt nur in Safari auf. Es passiert nicht in Chrome, obwohl die Animation funktioniert.

Answer 1

Die Lösung wird hier erwähnt: iPhone Webkit CSS -Animationen verursachen Flicker.

Für Ihr Element müssen Sie einstellen

-webkit-backface-visibility: hidden;

Answer 2

Die Regel:

-webkit-backface-visibility: hidden;

funktioniert nicht für Sprites oder Bildhintergründe.

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

Verschraubt Hintergründe, die gekachelt werden.

Ich bevorzuge eine Klasse namens No-Flick und mache Folgendes:

.no-flick{-webkit-transform:translate3d(0,0,0);}

Answer 3

Fügen Sie diese CSS -Eigenschaft zu dem flackernden Element hinzu:

-webkit-transform-style: preserve-3d;

(Und ein großer Dank an Nathan Hoad: http://nathanhoad.net/how-to-stop-css-animation-flicker-in-webkit)

Answer 4

Ich musste verwenden:

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

Auf dem Element, oder ich würde immer noch einen Flickr bekommen

Answer 5

Eine detailliertere Erklärung finden Sie in diesem Beitrag:

http://www.viget.com/inspire/webkit-transform-kill-the-flash/

Ich würde es auf jeden Fall vermeiden, es auf den ganzen Körper anzuwenden. Der Schlüssel besteht darin, sicherzustellen, dass das spezifische Element, das Sie in Zukunft verändern möchten, in 3D gestartet werden, damit die Browser nicht in die Rendering -Modi ein- und ausschalten müssen. Hinzufügen

-webkit-transform: translateZ(0) 

(oder entweder der bereits erwähnten Optionen) für das animierte Element wird dies erreichen.

Answer 6

Ich fand, dass die Anwendung des -webkit-backface-visibility: hidden; zum Übersetzungselement und -webkit-transform: translate3d(0,0,0); Für alle Kinder verschwindet der Flacker dann

Answer 7

Trigger -Hardware -beschleunigtes Rendering für das problematische Element. Ich würde empfehlen, dies nicht auf *, Körper- oder HTML -Tags für die Leistung zu tun.

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

Answer 8

Beide beiden oben genannten Antworten funktionieren für mich mit einem ähnlichen Problem.

Der Ansatz des Körpers {-webkit-transform} führt jedoch dazu, dass alle Elemente auf der Seite in 3D effektiv gerendert werden. Dies ist nicht das Schlimmste, aber es ändert das Rendern von Text und anderen Elementen im CSS-Stil leicht.

Es kann ein Effekt sein, den Sie wollen. Es kann nützlich sein, wenn Sie a machen viel der Transformation auf Ihrer Seite. Andernfalls ist -Webkit-Backface-Sichtbarkeit: Versteckt auf dem Element, das Ihre Transformation am wenigsten invasiv ist.