Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

html - Blurry images on stock android browser

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!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...