iPad css3 Animation flackert nach der Verwendung der Tastatur

Question

Ich entwickle eine App für das iPad mit HTML5/CSS3. Ich verwende kein Framework und verwende nur das, was nativ auf dem Gerät unterstützt wird. Ich habe einige CSS3-Animationen erstellt, um das typische iOS nach links oder rechts gleiten zu simulieren, wenn zwischen den Bildschirmen navigiert wird. Hier ist ein Beispiel für die Slide-Left-Animation, die die CSS3-Hardwarebeschleunigung des iPad nutzt: (Das iPad läuft mit 4.2).

/************************************************* 
Slide Left 
*************************************************/ 
.screen.slideleft{ 
-webkit-animation-duration: 0.5s; 
-webkit-animation-timing-function: ease-in-out; 
} 
.screen.slideleft.outgoing{ 
z-index: 50 !important; 
-webkit-animation-name: slideleft-outgoing; 

} 
.screen.slideleft.incoming{ 
z-index: 100 !important; 
-webkit-animation-name: slideleft-incoming; 
} 
@-webkit-keyframes slideleft-outgoing{ 
from { -webkit-transform: translate3d(0%,0,0); } 
to { -webkit-transform: translate3d(-100%,0,0); } 
} 
@-webkit-keyframes slideleft-incoming{ 
from { -webkit-transform: translate3d(100%,0,0); } 
to { -webkit-transform: translate3d(0%,0,0); } 
}

Ich habe auch diesen CSS, die ich versucht habe zu verwenden, das Flimmern zu beheben:

 
.incoming, 
.outgoing{ 
display: block !important; 
-webkit-backface-visibility: hidden; 
} 

Dies funktioniert gut, bis die iPad-Tastatur verwendet wird. Nach diesem Punkt flackern alle Animationen stark.

Ich habe nach Beispielen für eine iPad HTML5 App gesucht, die die Tastatur verwendet und danach kein Flackern mehr hat, aber nicht viel aufgedreht ist. Die jqTouch Demos zeigen das gleiche Verhalten auf dem iPad (obwohl ich weiß, dass sie für das iPhone entwickelt wurden).

Ich habe ein paar Posts/Fragen zu ähnlichen Fragen gestellt, aber noch nie eine gute Antwort gefunden. Ich bin durch http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/ und die dort verlinkten Artikel gegangen, habe aber keinen Erfolg gehabt.

Haben Sie noch weitere Vorschläge?

-Update 1/13 @ 9.00

Ich habe diese CSS hinzugefügt und es hat mir sehr geholfen:

 
.incoming *, 
.outgoing *{ 
-webkit-backface-visibility: hidden; 
-webkit-transform: translate3d(0,0,0); /* This helps with the flicker a lot. */ 
} 

The foreground elements don't seem to flicker anymore, but the backgrounds still do. Still looking for some help or helpful resources on Mobile Safari's memory handling tactics.

Update 1/16 @ 11pm

Increasing the z-index as suggested by anonymous. Didn't seem to make a difference.

Update 1/17 @ 8:30am

I've posted a demo of the problem here .

The transitions between screens work great...until you tap/click inside one of the form fields. After the keyboard slides up and returns, all the transitions flicker. Go to the URL inside the iOS simulator or on an actual iPad to see what I'm talking about.

Answer 1

Letztendlich gab es wirklich keine Lösung für dieses Problem.Es scheint, dass Formularelemente in WebKit auf dem iPad Probleme mit dem Flackern verursachen.

Meine Problemumgehung war, dass ich auf der Onblur jedes Formularelements die Seite mithilfe von Hash-Tags aktualisiert, um sicherzustellen, dass es auf den gleichen Zustand aktualisiert wurde. Es verursachte immer noch ein "Flimmern", während es erfrischend war, aber es hielt den Bildschirm davon ab, im Rest der App zu flimmern.

Answer 2

You're not going to like me saying this, but JavaScript may be the answer you're looking for. I fear that when you bring the keyboard up, the process of rendering the HTML loses priority. With a continually updating script, like a setInterval Schleife, das iPad wird keine andere Wahl haben, sondern wie geplant zu machen. Expliziter Code erfordert keine Hacks.

Answer 3

Betrachtet man die Quelle, wird translate3d (0,0,0) nicht angewendet, bis der Übergang beginnt?

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

oder

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

Das Flackern tritt wahrscheinlich die Hardware-Beschleunigung ist in Versuchen (es funktioniert derzeit nur auf Elemente 3d übersetzt).

Answer 4

ich mit Ben einverstanden sind, sollten Sie vielleicht auf den Klassen-Set verwandelt sich auch:

/************************************************* 
Slide Left 
*************************************************/ 
.screen.slideleft{ 
-webkit-animation-duration: 0.5s; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-transform: translate3d(0,0,0); 
} 
.screen.slideleft.outgoing{ 
z-index: 50 !important; 
-webkit-animation-name: slideleft-outgoing; 
-webkit-transform: translate3d(-100%,0,0); 
} 
.screen.slideleft.incoming{ 
z-index: 100 !important; 
-webkit-animation-name: slideleft-incoming; 
-webkit-transform: translate3d(0,0,0); 
} 
@-webkit-keyframes slideleft-outgoing{ 
from { -webkit-transform: translate3d(0,0,0); } 
to { -webkit-transform: translate3d(-100%,0,0); } 
} 
@-webkit-keyframes slideleft-incoming{ 
from { -webkit-transform: translate3d(100%,0,0); } 
to { -webkit-transform: translate3d(0,0,0); } 
} 

Wenn das nicht funktioniert, würde ich gespannt sein, zu testen, ob nur die X mit translateX(-100%) Fixes übersetzen das Problem. (Nicht unbedingt ein Fix, weil Sie keine Hardwarebeschleunigung ohne 3D-Transformationen haben, sondern das Problem eingrenzen könnten.)

Answer 5

Ich hatte das gleiche Problem, aber ich konnte das Flimmern fast unmerklich reduzieren, indem ich anwendete das Update hier und hier beschrieben:

http://code.google.com/p/jqtouch/issues/detail?id=301

https://github.com/senchalabs/jQTouch/issues/issue/130

gesetzt Grundsätzlich den z-Index der Seite findet man ein an -1 bewegt und nach dem transistion zurück auf 1

Answer 6

Ich hatte vor kurzem das gleiche Problem und versuchte alle Arten von komplizierten Korrekturen. Am Ende stellte ich fest, dass das Problem auf das Standard-Styling der Eingabe zurückzuführen war. Ich habe mein Problem behoben, indem ich die css input{outline:none} hinzugefügt habe. Es ist wahrscheinlich nur auf den Fokus-Zustand, so sollte input:focus{outline:none;} funktionieren.

Answer 7

Ich weiß, dass dies eine alte Frage des Dinosauriers ist, aber es gibt eine Lösung für dieses Problem, und es ist ziemlich leicht und sehr einfach.

document.getElementById('clicked_input').addEventListener('focus', function(e){ 
    e.stopPropagation(); 
},false); 

Als ich zu dieser Frage anzugehen, ich dachte, ich habe alles versucht - schließlich das einzige, was dazu beigetragen, eine modale Fenster (position: absolute) zu schaffen, war außerhalb des Containers div App und stellen auch die App-Container-Div zum Anzeigen: false; als die Tastatur aufging. Während es funktionierte, war es hässlich, ich testete alles, um zu sehen, was das Ereignis verursacht hat und es schien, dass, wenn das "Fokus-Ereignis" aufplatzte, jede 3D-Transformation durcheinander gebracht wurde (in Flackern und Leistung).

Die Verhinderung des Bubbling-Problems löste dieses Problem vollständig - völlig verrückt, dass solch ein gehasster Bug eine so einfache Lösung hatte?

Answer 8

Dies ist eine alte Frage, aber ich dachte, ich würde meine Erfahrung teilen.

Ich hatte Probleme mit unerhörtem Flackern (auf CSS3-Animationen) auf dem iPad (sowie dem iPhone, aber in diesem Fall nur im Hochformat). Ich konnte alle flackernden Probleme vollständig lösen, indem ich folgendes einstellte:

Auf den Elementen, die animiert werden. Ich bin nicht sicher, warum das funktioniert, aber es tut (getestet auf iOS 4.2 +, iPad (1 und 2) und iPhone 4).

Update: Ich wurde gerade auf ein Problem mit Chrome aufmerksam, als ich den Wert dieses Attributs auf 1 einstellte. Es funktioniert ganz gut, wenn es 0 ist, also habe ich das oben Genügend aktualisiert.