PhoneGap – Teclado hace que la pantalla se vuelva negra y flickery durante algún tiempo en Samsung Galaxy Tab 10.1

Estoy desarrollando aplicaciones móviles usando HTML5 y CSS3 usando PhoneGap. Mi problema es que cuando toco un cuadro de texto en mi página web que se ejecuta en el Samsung Galaxy Tab 10.1 (Android v3.1), muestra el teclado, pero la página se vuelve negra por una fracción de segundo. A veces, parpadea durante un tiempo mostrando fondo negro y luego se restaura.

Incluso intenté con una página simple con una sola input type="text" e incluso sucede con el mismo.

¿Alguien se enfrentó a un problema similar y ha tenido una solución para ello?

Cualquier ayuda es muy apreciada.

Gracias.

ACTUALIZACIÓN 1:

Como he dicho anteriormente, el parpadeo negro incluso sucede con la aplicación que contiene una página simple con un solo cuadro de texto. El siguiente es el código:

 <!DOCTYPE html> <html> <head> <title> Flickering Problem </title> <style> html, body{ -webkit-backface-visibility: hidden; overflow: hidden; -webkit-transform: translate3d(0,0,0); } </style> </head> <body> <input type="text" width="200px" height="100px" /> </body> </html> 

He probado esto en mi tableta Android, y el parpadeo fue como con una página web de pleno derecho. Intenté agregar ciertos atributos de CSS sugeridos aquí en SO para el problema similar que demandó solucionar, pero ayudó realmente.

Vale la pena señalar que el parpadeo negro está ocurriendo cada vez que intentamos ingresar cualquier texto en el cuadro de texto, y actualmente no estoy haciendo ninguna animación (s) / transiciones usando CSS3.

La solución es habilitar aceleración de hardware en el manifiesto android.

 <application android:hardwareAccelerated="true" ... /> 

Esto permite realizar doble búfer a través de la GPU y resuelve el problema. Ten en cuenta que esta opción solo está disponible en Android 3.0+.

Aquí está el fondo para todos ustedes techies: 🙂 Hemos estado probando recientemente una aplicación funcional de HTML5 de jQuery Mobile envuelta con teléfonos PhoneGap Android 2.x a la pestaña Galaxy 10.1. Hemos visto algo muy similar, con la excepción de que hemos definido una pantalla de bienvenida para nuestra aplicación. Lo que vemos es que cuando se le da un foco a un campo de entrada, la pantalla parpadea momentáneamente. ¡Muy molesto! Para verificar si este es el mismo problema, defina una pantalla de bienvenida para su aplicación PhoneGap y vea si la pantalla muestra su imagen en lugar de un fondo negro. Conociendo algo sobre lo que está pasando con PhoneGap y la WebView de Android, esta es mi mejor estimación de lo que está sucediendo: PhoneGap carga la actividad principal de la aplicación con un fondo negro y muestra la pantalla de bienvenida (si está definida) en esa ventana inicial. PhoneGap luego inicia WebView y lo abre en la parte superior de la ventana principal. Cuando se selecciona un campo, Android invalida el tiempo de wach de componente que lo actualiza en función de un evento de enfoque o pulsación de teclas, o lo que sea, y Android vuelve a dibujar todo. Por lo tanto, vuelve a dibujar la ventana principal detrás del WebView y luego vuelve a dibujar el WebView con el contenido de la página HTML encima. Dado que el dispositivo no está correctamente doble buffer, verá todo este rediseño en toda su fea gloria justo delante de sus ojos.

Hemos visto problemas graves con formularios web de Android en algunos teléfonos Android 2.x que hemos probado, y esto parece ser otro problema, pero esta vez en el Galaxy Tab con Honeycomb (3.0).

Hemos intentado usar CSS -webkit-backface-visibility para resolver problemas en algunos teléfonos cuando experimentamos parpadeo en el pasado- pero esto ha causado serios problemas de renderizado en formularios HTML . ¡Ten cuidado! En teoría, esto debería ser una solución viable para introducir un doble buffer en la mezcla, pero en nuestra experiencia causa más problemas de los que resuelve.

Esto es un problema con el sistema operativo Android o Phonegap.

Si se trata de un problema con Android , esto sólo se puede solucionar con una actualización de software para el sistema operativo. Puede probar esto al ir a un sitio web regular con un cuadro de texto y pulsando en él para introducir texto. Si parpadea, es probablemente el sistema operativo.

Si se trata de un problema con Phonegap , podría solucionarse realizando una búsqueda específica para ello. Mirando los resultados superiores en google, he encontrado esto:

http://www.senchatouchbits.com/6/fixing-flickering-of-animations-in-phonegap.html

Esto sugiere que pones -webkit-backface-visibility: hidden; En su código. Mientras que veo que lo puso en el html, body tag, trate de ponerlo en la etiqueta * , por ejemplo:

 *{ -webkit-backface-visibility: hidden; } 

Nota: El enlace pone el estilo en una etiqueta de .x-panel , no estoy seguro si es específico para su código o para Android.

Aquí hay otro enlace al que debe buscar una solución: http://code.google.com/p/jqtouch/issues/detail?id=301

He añadido una página de demostración:

http://jsbin.com/upixel/

De su código, la input es grande (el ancho y la altura deben ser configurados por css) – si es así, el color negro puede venir del color de toque por defecto y el parpadeo puede venir de bloqueo (falla del teléfono o de la secuencia de comandos)

Verá esto resolverá su parpadeo:

  * { -webkit-tap-highlight-color: rgba(0,0,0,0); } 

Demo en vivo

Espero que pueda ayudar

He tenido el mismo problema y al principio pensé que tenía que ver con la parte manifiesta de la aplicación.

Después de horas de solucionar esto es lo que funcionó para mí. (Todavía no he tenido el problema después de una hora de pruebas en el teléfono.Samsung galaxy s2, versión 4.0.3 Y para la aplicación estoy usando verison 2.1).

Html {background: url (img / brownBG.PNG) repetir 0 0;}

Acabo de poner un fondo en el html y ahora funciona bien. Si intenta esta solución, comente si funciona para usted o no.

EDIT: También tengo esta regla css que es importante para que funcione * {- webkit-backface-visibility: hidden;}

Si alguien todavía está buscando una solución a esto, encontré el ticket de soporte para este error: http://bugs.dojotoolkit.org/ticket/15365

A partir de hoy, la mejor solución consiste en usar la opción adjustPan Android más la subclase anterior de ScrollableView? (Si puedes permitirte crear un APK dedicado a Android> = 3, también puedes añadir la opción hardwareAccelerated). Esto soluciona todos los problemas excepto la duplicación de campo en Android 4. Por supuesto, si el ScrollableView? No es realmente obligatorio en la vista que contiene campos de texto, sustituirlo por una vista es aún mejor.

En conjunción con las soluciones mencionadas anteriormente (es decir, -webkit-backface-visibility: hidden y android: hardwareAccelerated = "true"), también he intentado cualquiera de los siguientes:

(Aplicable sólo en la versión de Android> = 3)

  1. AndroidManifest.xml

    Android: windowSoftInputMode = "adjustPan"

  2. MyActivity.java

     this.runOnUiThread(new Runnable() { public void run() { getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_PAN); } }); 

Tengo una solución probada para este problema, también estaba enfrentando el mismo problema, pero lo he resuelto yo mismo. En primer lugar crear un campo dentro del cuerpo y lo hacen oculto o puede hacer que se esconda detrás de una div usando z-index para que no sea visible.

 <script> $(document).ready(function() { document.getElementById('example').value=''; }); </script> <body> <div style='z-index:50;position:absolute;height:100%;width:100%;'> Your page matter here</div> <select id='example' style='z-index:10'> <option value=''>a</option> </select></pre> </body> 

El moto es que tenemos que configurar este campo select cuando la carga de la página, y haciendo esto detendrá el parpadeo seguro … probarlo chicos … funcionó para mí

Tuve el mismo problema en Samsung Galaxy Tab 10.1 como el suyo. Mientras actualizaba la versión de Android de 3.1 a 4.0.3 (utilizando Cyanogenmod 9.0 noche construir 20120302) y sin ningún cambio de código, el problema se resolvió en mi dispositivo.

Así que supongo que se trata de un problema de componente webview en la versión de Galaxy Tab android.

No puedo decir que esto solucione su problema, pero vale la pena una inyección. Compruebe su archivo AndroidManifest.xml para android:configChanges="orientation|keyboardHidden" en la etiqueta de activity (bajo la aplicación).

  • Android Error cromo desconocido: -6
  • Aplicación nativa más rápida que HTML5
  • ¿Cómo determinar si una aplicación es nativa o html5?
  • Reproducción de vídeos HTML5 en el navegador - ¿Qué funciona para la mayoría de los dispositivos Android?
  • Limitaciones de almacenamiento de Web SQL en Chrome y Android?
  • Problema extraño en la vista web de Android con lienzo
  • ¿Puedo acceder mediante programación a los sensores de un smartphone a través del navegador y JavaScript?
  • Gesto del usuario necesario para iniciar la reproducción en el reproductor HTML5 de Android
  • No se puede dibujar en un lienzo HTML5 con Phonegap 2.7
  • Phonegap - Elija la imagen de la galería
  • Pase el token de acceso de Facebook al cuadro de comentarios
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.