Imágenes borrosas en el navegador Android de stock

He estado tratando de resolver esto durante semanas y no he encontrado soluciones reales. He descubierto una solución, pero me parece muy molesto.

Las imágenes cargan borroso en el navegador por defecto de mi Galaxy S3, pero en cromo y firefox cargan perfecto sin la solución. Las imágenes son 2x ya para pantallas de alta DPI por lo que no es el problema.

Restauración del estado de vista web que contiene HTML generado dinámicamente
La pantalla de Android gira el problema
Configurar una base de datos de servidor en línea y codificar mi aplicación nativa de Android para interactuar con ella
¿Cómo puedo encontrar la cantidad de datos que se transfieren cuando hago una llamada de servicio web desde mi aplicación android?
Android 4.1 webview javascript no funciona.

El trabajo alrededor es colocar cualquier texto en el enlace a. Pongo "."

<a href="#">.</a>

Y haciendo que el tamaño de fuente sea muy pequeño.

 #closeButton a{ float:left; display:block; position:fixed; top:9px; left:10px; width:46px; height:44px; background:url(../img/camera/closeX@2x.png) 0 0 no-repeat; background-size:46px 90px; text-align:center; font-size:1px; color:#FFF; } #closeButton a:active{ background-position:0 -45px; } <span id="closeButton"><a ontouchstart="" href="vibes.html"></a></span>

Captura de pantalla sin solución: http://igor2.com/blurry/no-text.png

Captura de pantalla con la solución: http://igor2.com/blurry/with-text.png

¡Cualquier ayuda sería apreciada! He estado tirando de mi pelo tratando de entender esto. Tiene que haber una solución puesto que el móvil del facebook y otras páginas móviles cargan imágenes / iconos quebradizos agradables. ¡Gracias!

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.