Imágenes borrosas en el navegador Android de stock

Tuve el mismo problema y me enteré de que la causa del problema es la position:fixed y z-index en el navegador web predeterminado de Android ( no Chrome!).

Después de quitar estos atributos de css, todas mis imágenes se hicieron muy nítidas y claras.

Desde mi experiencia, position:fixed es un no-go para móviles, especialmente en Android y versiones anteriores de iOS. El único os móviles que sé que puede manejar la position:fixed bien es iOS6 y versiones posteriores.

Actualización: Hasta ahora la única solución que conozco es simplemente evitar la combinación de position:fixed y z-index . A veces sólo deshacerse de z-índice hace el truco o no utilizar la position:fixed en absoluto en iOS y Android. No es una buena práctica en el móvil de todos modos. Además, solo puedes orar para que Chrome reemplace a Android Stock Browser como el navegador predeterminado en el futuro lo más rápido posible en la mayoría de los dispositivos Android.

Me doy cuenta de sus capturas de pantalla que actualmente está probando esto sobre su 4G (es decir: conexión móvil).

¿Ha intentado repetir las pruebas sobre wifi en su lugar? Usted necesita asegurarse de que no tire de la memoria caché al comparar, por lo que también vale la pena dejar caer su navegador en el modo de navegación privada / incógnito – esto le obligará a agarrar nuevos activos del host en lugar de usar activos en caché interno (mucho más fácil que limpiar su Caché del navegador cada vez).

La razón por la que menciono la conexión a Internet del dispositivo es que me encontré con un problema muy similar el año pasado y, después de mucha caza, llegó a la conclusión de que era el proxy de la red compresión de las imágenes antes de la entrega para ahorrar en ancho de banda.

Yo podría estar muy lejos de la marca, pero es sin duda algo que debe comprobar para que pueda por lo menos cruzar esa posibilidad de su lista.

Si resulta ser el caso, hay una discusión muy interesante sobre todo: http://blog.sebcante.com/2012/01/prevent-image-compression-from-3g.html

La mala noticia es que las redes móviles no siempre prestan atención a los encabezados http sin caché.

Las tres opciones más sencillas disponibles son:

• Servir sus imágenes a través de https – la red no caché tráfico cifrado;
• Servir sus imágenes a través de diferentes puertos http;
• Use url de datos para incrustar las imágenes en línea (aunque hay implicaciones de soporte de navegador en ese momento).

Por último, hay una solución parcial en el archivo htaccess de la plantilla de HTML5 que va de alguna manera a mitigar estos efectos. En el archivo htaccess:

 # ---------------------------------------------------------------------- # Prevent mobile network providers from modifying your site # ---------------------------------------------------------------------- # The following header prevents modification of your code over 3G on some # European providers. # This is the official 'bypass' suggested by O2 in the UK. <IfModule mod_headers.c> Header set Cache-Control "no-transform" </IfModule> 

Esto funciona con la pareja de las redes del Reino Unido que he probado, pero sus resultados pueden variar.