teclado mini instalar funciona conectar como javascript css ipad css3 cordova

javascript - mini - La animación del iPad CSS3 parpadea después de usar el teclado



conectar teclado bluetooth a windows 10 (8)

Estoy desarrollando una aplicación para el iPad usando HTML5 / CSS3. No estoy usando ningún marco y solo uso lo que sea compatible de forma nativa con el dispositivo. He creado algunas animaciones css3 para emular el iOS típico que se desliza hacia la izquierda o hacia la derecha al navegar entre pantallas. Aquí hay un ejemplo de la animación de la diapositiva izquierda que está aprovechando la aceleración de hardware CSS3 del iPad: (el iPad se está ejecutando 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); } }

También tengo este CSS que he intentado usar para corregir el parpadeo:

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

Esto funciona muy bien hasta que se utiliza el teclado del iPad. Después de lo cual todas las animaciones parpadean severamente.

He estado buscando ejemplos de una aplicación de HTML5 para iPad que usa el teclado y no tiene parpadeos después, pero no he aparecido mucho. Las demostraciones de jqTouch exhiben el mismo comportamiento en el iPad (aunque sé que fueron diseñadas para el iPhone).

He subido algunas publicaciones / preguntas de preguntas similares, pero nunca he encontrado una buena respuesta. He estado en http://css3animator.com/2010/12/fight-the-flicker-making-your-css3-animation-bomb-proof/ y los artículos vinculados allí pero no han tenido ningún éxito.

¿Cualquier otra sugerencia?

Actualizar 1/13 @ 9am

He añadido este css y me ayudó mucho:

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

Los elementos de primer plano no parecen parpadear más, pero los fondos todavía lo hacen. Todavía estoy buscando ayuda o recursos útiles sobre las tácticas de manejo de memoria de Mobile Safari.

Actualizar 1/16 @ 11pm

Incrementando el índice z como lo sugiere anónimo. No parecía hacer una diferencia.

Actualizar 1/17 a las 8:30 am

He publicado una demostración del problema here .

Las transiciones entre pantallas funcionan muy bien ... hasta que toque / haga clic dentro de uno de los campos del formulario. Después de que el teclado se desliza hacia arriba y regresa, todas las transiciones parpadean. Vaya a la URL dentro del simulador de iOS o en un iPad real para ver de qué estoy hablando.

En última instancia, realmente no había una solución para este problema. Parece que los elementos de formulario en WebKit en el iPad causan problemas con el parpadeo.

Mi solución fue que en el onblur de cada elemento del formulario, actualicé la página con etiquetas hash para asegurar que se actualizase exactamente al mismo estado. Todavía causó un "parpadeo" mientras era refrescante, pero evitó que la pantalla parpadeara durante el resto de la aplicación.

Esta es una vieja pregunta, pero pensé que compartiría mi experiencia.

He estado teniendo problemas con parpadeo indignante (en animaciones css3) en el iPad (así como en el iPhone, pero en ese caso solo en vista vertical). Pude resolver por completo todos los problemas de parpadeo al configurar:

-webkit-perspective: 0;

Sobre los elementos que se animan. No estoy seguro de por qué funciona esto, pero sí (probado en iOS 4.2+, tanto iPad (1 y 2) como iPhone 4).

Actualización: Me acabo de dar cuenta de un problema con Chrome al establecer el valor de ese atributo en 1. Funciona bien cuando es 0, por lo que he actualizado el anterior de manera adecuada.

Estoy de acuerdo con Ben, probablemente deberías establecer transformaciones en las clases también:

/************************************************* 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); } }

Si eso no funciona, me gustaría saber si solo traducir la X con translateX(-100%) soluciona el problema. (No necesariamente una solución, porque no tiene aceleración de hardware sin transformaciones 3D, pero ayudaría a reducir el problema).

Mirando su fuente, ¿translate3d (0,0,0) no se aplica hasta que comienza la transición?

Tratar

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

o

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

El parpadeo es probablemente la aceleración del hardware (actualmente solo funciona en elementos traducidos en 3D).

No te va a gustar que te diga esto, pero JavaScript puede ser la respuesta que estás buscando. Me temo que cuando se abre el teclado, el proceso de representación del HTML pierde prioridad. Con un script que se actualiza continuamente, como un bucle setInterval , el iPad no tendrá más remedio que renderizar según lo planeado. El código explícito no requiere hacks.

Recientemente he tenido el mismo problema y he intentado todo tipo de correcciones complicadas. Al final, descubrí que el problema se debía al estilo predeterminado en la entrada. Solucioné mi problema agregando la input{outline:none} css input{outline:none} . Es probable que solo esté en el estado de enfoque, por lo que la input:focus{outline:none;}

Sé que esta es una vieja pregunta sobre dinosaurios, pero hay una solución para este problema y es bastante liviana y muy simple.

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

Cuando abordé este problema también, pensé que lo intenté todo. Al final, lo único que ayudó fue crear una ventana modal (posición: absoluta) fuera del div contenedor de la aplicación, y también configurar el div del contenedor de la aplicación para que muestre: false ; cuando el teclado estaba subiendo Si bien funcionó fue feo, probé todo para ver qué causó el evento y parecía que cuando el ''evento de enfoque'' brotaba, cada transformación 3d se desordena (en parpadeo y rendimiento).

Prevenir el evento de burbujeo solucionó este problema por completo. ¿Es bastante sorprendente que un error tan odiado tuviera una solución tan simple?