Cuando se activa el keyboard virtual en iOS Safari, hace que las transiciones de CSS parpadeen. ¿Cómo se puede arreglar esto?

En Mobile Safari, parece que el webkit transita mientras el keyboard virtual está disparando (es decir, deslizándose hacia arriba), provoca un parpadeo, a veces incluso salta la animation por completo.

Parece que incluso parpadea / juzga incluso si pongo un transition-delay en él.

Lo curioso es que la animation es suave en el desenfoque (retiros de keyboard).

Puedo replicar el problema en un JSFiddle aquí: (ábralo en iOS)

JSFiddle se incluye a continuación:

http://jsfiddle.net/5w0fj2rx/

Puede ver que el enfoque / toque en el elemento de input saltará la animation la mayor parte del time . A veces funciona bien.

Alguien sabe de una solución para esto? Parece algo que debería haber sido encontrado antes, pero no puedo encontrar ninguna información al respecto.

Solutions Collecting From Web of "Cuando se activa el keyboard virtual en iOS Safari, hace que las transiciones de CSS parpadeen. ¿Cómo se puede arreglar esto?"

Pude ver las transiciones aquí .

Agregué a su elemento box.move.

 #box.move { -webkit-transform: translate3d(300px, 0, 0); -webkit-backface-visibility: hidden; } 

Además … Ya estás usando jQuery, por lo que utilizaría eso en lugar de CSS para realizar animaciones y transiciones.

Editar:

Hice algunos juegos adicionales con la relajación de tu transición y pude eliminar cualquier salto / parpadeo de la transición antes. Aquí está el violín .

 -webkit-transition: -webkit-transform cubic-bezier(0.32, 0, 0.68, 1) 500ms; 

Lo único que puedo asumir es la razón detrás de esto, es la velocidad de fotogtwigs a la que el browser puede procesar la transición. Entonces, al networkingucir la cantidad de movimiento del elemento al principio, podemos eliminar el efecto de parpadeo. Es posible que este sea el motivo por el que el browser pnetworkingeterminado para los videos es abrir el reproductor de video. No creo que el browser Safari mobile se haya creado para mover elementos 300 píxeles en 500 ms, sin problemas.