Immagini sfocate su browser Android di serie

Question

Ho cercato di capire questo per settimane e non ho trovato soluzioni reali. Ho scoperto una soluzione, ma la trovo molto fastidiosa.

Le immagini si caricano sfocate sul browser predefinito del mio Galaxy S3 ma in chrome & si caricano perfettamente senza soluzione alternativa. Le immagini sono già 2x per gli schermi DPI alti, quindi non è questo il problema.

Il lavoro attorno è inserire qualsiasi testo nel collegamento a. Metto "."

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

e rendere la dimensione del carattere molto piccola.

#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> 

Schermata senza soluzione: http://igor2.com/blurry/no-text.png

screenshot con soluzione: http://igor2.com/blurry/with-text.png

Qualsiasi aiuto sarebbe apprezzato! Mi sto strappando i capelli cercando di capirlo. Deve esserci una soluzione perché Facebook mobile e altre pagine mobili caricano belle immagini/icone nitide. Grazie!

Answer 1

Ho notato dai tuoi screenshot che stai testando questo sul tuo 4G (es .: connessione mobile).

Hai provato a ripetere i test su wifi invece? Devi assicurarti di non estrarre la cache durante il confronto, quindi vale anche la possibilità di lasciare il browser in modalità di navigazione privata/in incognito: questo lo costringerà ad attingere nuove risorse dall'host piuttosto che utilizzare risorse memorizzate internamente (molto più facile che cancellare il tuo cache del browser ogni volta).

La ragione per cui ho menzionato la connessione Internet del dispositivo è che l'anno scorso mi sono imbattuto in un problema molto simile e, dopo molte ricerche, mi sono reso conto che era il proxy della rete che comprimeva le immagini prima della consegna per risparmiare larghezza di banda.

Potrei essere lontano dal marchio ma è sicuramente qualcosa che dovresti controllare in modo da poter almeno traintendere questa possibilità dalla tua lista.

Se non risultano essere il caso, tere una discussione molto interessante su tutta la cosa: http://blog.sebcante.com/2012/01/prevent-image-compression-from-3g.html

La cattiva notizia è che le reti mobili non sempre prestare attenzione a no-cache intestazioni HTTP.

Le tre più semplici opzioni disponibili sono:

• servono le immagini tramite HTTPS - la rete non criptata di cache del traffico;
• serve le tue immagini tramite una diversa porta http;
• utilizzare data-url per incorporare le immagini in linea (anche se a quel punto ci sono implicazioni di supporto del browser).

Infine, c'è una soluzione parziale nel file htaccess dello HTML5 boilerplate che va in qualche modo a mitigare questi effetti.Nel file .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> 

Questo funziona con la coppia di rete di Regno Unito che ho provato, ma i risultati possono variare ..

Answer 2

Ho avuto lo stesso problema e ha scoperto che la causa del il problema è position:fixed e z-index sul browser Web Android predefinito (non Chrome!).

Dopo aver rimosso questi attributi CSS, tutte le mie immagini sono diventate molto nitide e chiare.

Dalla mia esperienza, position:fixed è un no-go per dispositivi mobili, in particolare su Android e versioni iOS precedenti. L'unico sistema operativo mobile che conosco che è in grado di gestire lo position:fixed è iOS6 e versioni successive.

---

Aggiornamento: Finora l'unica correzione che io conosca è quello di evitare semplicemente combinando position:fixed e z-index. A volte basta sbarazzarsi di z-index o non usare il position:fixed affatto su iOS e Android. In ogni caso, non è una buona pratica sui dispositivi mobili. Oltre a questo, puoi solo pregare che Chrome sostituisca Android Stock Browser come browser predefinito in futuro il più velocemente possibile sulla maggior parte dei dispositivi Android.