Blurry images on stock android browser

Question

I've been trying to figure this out for weeks and have found no real solutions. I discovered one workaround but I find it very annoying.

The images load blurry on my Galaxy S3's default browser but in chrome & firefox they load perfect without the workaround. The images are 2x already for high DPI screens so that's not the issue.

The work around is placing any text in the a link. I put "."

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

and making the font size very small.

#closeButton a{
float:left;
display:block;
position:fixed;
top:9px;
left:10px;
width:46px;
height:44px;
background:url(../img/camera/[e-mail]) 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>

Screenshot without workaround: http://igor2.com/blurry/no-text.png

Screenshot with workaround: http://igor2.com/blurry/with-text.png

Any help would be appreciated! I've been pulling my hair out trying to figure this out. There has to be a solution since facebook mobile and other mobile pages load nice crisp images/icons. Thank you!

Answer 1

I notice from your screenshots that you're currently testing this over your 4G (ie: mobile connection).

Have you tried repeating the tests over wifi instead? You need to ensure you don't pull cache when comparing so it's also worth dropping your browser into private browsing/incognito mode - this will force it to grab fresh assets from the host rather than using internally-cached assets (much easier than wiping your browser cache every time).

The reason I mention the device internet connection is that I came across a really similar issue last year and, after much hunting, came to the realisation that it was the network's proxy compressing the images prior to delivery to save on bandwidth.

I might be way off the mark but it's certainly something you should check so that you can at least cross that possibility off your list.

If it does turn out to be the case, tere's a really interesting discussion on the whole thing: http://blog.sebcante.com/2012/01/prevent-image-compression-from-3g.html

The bad news is that mobile networks don't always pay attention to no-cache http headers.

The three most simple options available are:

• serve your images via https - the network won't cache encrypted traffic;
• serve your images via different http port;
• use data-url to embed the images in-line (although there are browser-support implications at that point).

Finally, there is a partial-workaround in the htaccess file of the HTML5 boilerplate which go some way to mitigating these effects. In the htaccess file:

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

This works with the couple of the UK networks I've tested, but your results may vary..

Answer 2

I had the same problem and found out that the cause of the issue is position:fixed and z-index on the default Android web browser (not Chrome!).

After removing these css attributes, all my images became very crisp and clear.

From my experience, position:fixed is a no-go for mobile, especially on Android and older iOS versions. The only mobile os I know that can handle position:fixed well is iOS6 and later versions.

---

Update: So far the only fix that I know of is to simply avoid combining position:fixed and z-index. Sometimes just getting rid of z-index does the trick or don't use position:fixed at all on iOS and Android. It's not a good practice on mobile anyway. Besides that you can only pray that Chrome will replace Android Stock Browser as the default browser in the future as fast as possible on most Android devices.