Bei Mobile Safari scheint das Webkit zu wechseln, während die virtuelle Tastatur ausgelöst wird (d. H. Nach oben gleitet), flackert, manchmal wird die Animation sogar ganz übersprungen.
Es scheint sogar, dass es sogar flackert / ruckelt, auch wenn ich ein transition-delay darauf.
Die seltsame Sache ist, dass die Animation bei Unschärfe glatt ist (Tastaturrückzüge).
Ich kann das Problem hier in einem JSFiddle replizieren: (in iOS öffnen)
JSFiddle ist unten enthalten:
Sie können sehen, dass das Fokussieren / Tippen auf das Eingabeelement die Animation überspringt meistens. Manchmal funktioniert es gut.
Kennt jemand eine Problemumgehung dafür? Es scheint etwas zu sein, das man zuvor gesehen haben sollte, aber ich kann keine Informationen darüber finden.
Antworten:
2 für die Antwort № 1Ich konnte die Übergänge sehen Hier.
Ich habe Ihr box.move Element hinzugefügt.
#box.move {
-webkit-transform: translate3d(300px, 0, 0);
-webkit-backface-visibility: hidden;
}
Außerdem ... Sie verwenden bereits jQuery, also würde ich anstelle von CSS Animationen und Übergänge ausführen.
Bearbeiten:
Ich habe einige zusätzliche Probleme mit der Erleichterung bei Ihrem Übergang gemacht, und ich konnte das Springen / Flimmern des Übergangs entfernen. Hier ist der Geige.
-webkit-transition: -webkit-transform cubic-bezier(0.32, 0, 0.68, 1) 500ms;
Das einzige, was ich vermuten kann, ist der Grund dafürDies ist die Bildrate, mit der der Browser den Übergang verarbeiten kann. Durch Verringern der Menge, um die sich das Element zuerst bewegt, können Sie den Flimmereffekt entfernen. Dies ist möglicherweise der Grund, warum der Browser standardmäßig den Videoplayer öffnet. Ich glaube nicht, dass der mobile Safari-Browser für das reibungslose Verschieben von Elementen mit 300 Pixeln in 500 ms in 500 ms entwickelt wurde.