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/[email protected]) 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 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.