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!

2 Solutions collect form web for “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.

  • Depurar HTTPS peticiones / respuestas con Fiddler en Android Phone don `t trabajo
  • Ampliar / reducir en webview android
  • WebView no carga los activos correctamente
  • La solicitud de servicio web no funciona en el navegador android android; Pero está trabajando en el navegador de PC
  • ¿Por qué mi tamaño de fuente parece mucho más grande en el objeto de vista web android que cuando se ve en el navegador de Android?
  • Uso de zxing Barcode Scanner dentro de una página web
  • cómo guardar y restaurar Webview Estado?
  • FilePicker desde android webview trabajando sólo una vez
  • Android - Elija el botón Archivo en WebView
  • Cambios en una página web a través de JavaScript que no aparecen en WebView. ¿Hay una manera de forzar el WebView para volver a dibujar su contenido?
  • ¿Cómo puedo abrir una aplicación de mi navegador web (Chrome) en Android? ¿Qué tengo que ver con el enlace A Href?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.