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.

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.

  • Mostrar una ubicación geográfica mediante webview
  • Pestaña servidores no visible en eclipse v3.7.2
  • Android: Obtener la posición de desplazamiento de un WebView
  • La cookie de la webview de Android devuelve null
  • El banner de instalación de la aplicación no funciona
  • Vinculación del elemento de una página web a una aplicación para Android
  • cómo guardar y restaurar Webview Estado?
  • Android ViewPager + Webview, ClassCastException! Necesita una vista web en un viewpager
  • Tiempo de espera para solicitud de servidor hecha usando "Volley" solo en Android no iOS
  • Android cómo enviar int y doble como namevaluepair como http post
  • Aumentar el tamaño de la cuota WebSQL en un WebView
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.