库存android浏览器上的模糊图像 [英] 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.
图像在我的 Galaxy S3 的默认浏览器上加载模糊，但在 chrome &firefox 他们在没有解决方法的情况下完美加载.对于高 DPI 屏幕，图像已经是 2 倍，所以这不是问题.
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>
并使字体非常小.
#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>
没有解决方法的截图:http://igor2.com/blurry/no-text.png
解决方法的屏幕截图:http://igor2.com/blurry/with-text.png
任何帮助将不胜感激！我一直在努力解决这个问题.必须有一个解决方案，因为 facebook mobile 和其他移动页面加载了漂亮的清晰图像/图标.谢谢！
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!
推荐答案
我也遇到了同样的问题，发现问题的原因是position:fixed和z-index 在默认的 Android 网络浏览器(不是 Chrome！)上.
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!).
去掉这些css属性后，我所有的图片都变得非常清晰.
After removing these css attributes, all my images became very crisp and clear.
根据我的经验，position:fixed 不适合移动设备，尤其是在 Android 和较旧的 iOS 版本上.我所知道的唯一可以很好地处理 position:fixed 的移动操作系统是 iOS6 及更高版本.
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.
更新: 到目前为止，我所知道的唯一解决方法是简单地避免组合 position:fixed 和 z-index.有时只是摆脱 z-index 就可以了，或者在 iOS 和 Android 上根本不使用 position:fixed .无论如何，这在移动设备上不是一个好习惯.除此之外，您只能祈祷 Chrome 将来在大多数 Android 设备上尽快取代 Android Stock 浏览器成为默认浏览器.
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.
这篇关于库存android浏览器上的模糊图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
