Question

没有人能回答这个类似的问题，

所以我要根据自己的情况发布我自己的版本。

问题是position:fixed导致子图像元素在某些Android浏览器中变得模糊。在我的情况下，它导致运行Android 4.0的Galaxy Note v1的股票浏览器遇到此问题。其他人对Galaxy S3说了同样的话。这是我的代码：

预览@ http://jl.evermight.net/blurryposition/

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
    </head>
    <body>
        <div id="top-nav-container"
        style="
        display:block;
        top:0px; 
        position:fixed;
        width:100%; height:5.2rem;
        ">
            <a style="background-image:url(logotest_big.jpg);
            background-size:20%;
            display:block;
            width:500px;
            height:200px;
            "></a>
        </div>


    </body>
</html>

您会注意到OPTIX Testing徽标最初是模糊的。如果您从position:fixed中删除#top-nav-container，那么徽标就会清晰明了。所以我的问题是，我如何保留position:fixed和一个清晰的徽标？

在我的真实网站中，当您滚动浏览网站时，顶部导航应该保持固定状态。我尝试使用position:absolute并使用javascript重新定位滚动顶部导航，但这导致了一大堆跳跃/闪烁效果。因此，如果我无法使用position:fixed或position:absolute将顶部导航修复到移动网络浏览器的顶部，那么我还有哪些其他选择？其他移动网站如何实现这一结果？

其他信息：

我在调整大小图像，更改视图端口和更改位置方面做了一些实验：固定/绝对，并得出了一些有趣的结果。见下文：

位置：使用-viewport固定无背景大小 - 模糊
位置：固定无背景大小不带视口 - 清晰
position：fixed background-size：20％with-viewport - fuzzy
位置：固定背景尺寸：20％无视口 - 模糊
位置：绝对无背景大小with-viewport - 模糊
位置：绝对无背景大小不带视口 - 清晰
位置：绝对背景大小：20％with-viewport - 清晰
位置：绝对背景大小：20％无视口 - 清晰

以下是阅读此图表的方法：

第一栏说明#top-nav-container是否正在使用position：fixed或position：absolute
如果我使用background-size:20%或者如果我省略它，则第二列说明
第三栏说明我是否在头部包含<meta viewport>标记
第四栏说明optix测试标识是模糊还是清晰。

查看结果，您可以看到唯一一次获得清晰图像的容器位置：固定是指图像未通过背景大小或视图端口拉伸或压缩。此外，唯一一次使用具有位置的容器的模糊图像：绝对是指图像已经使用背景大小和视口进行拉伸。

Answer 1

在移动设备上使用position: fixed仍然是一个坏主意。绝大多数网站都回归到移动视图的静态标题（即没有浮动导航栏）。

我最近遇到过类似问题，如this question所述。

为您提供的一些资源：

阅读Quirksmode上的这篇文章，了解问题所在：http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
在此表中查看哪些移动浏览器支持position: fixed：http://caniuse.com/#search=fixed

Answer 2

在top-nav-container中添加 。

<div id="top-nav-container"
    style="
    display:block;
    top:0px; 
    position:fixed;
    width:100%; height:5.2rem;
    ">
        <a style="background-image:url(logotest_big.jpg);
        background-size:20%;
        display:block;
        width:500px;
        height:200px;
        "></a>
        &nbsp;
    </div>

使用背景图像作为图标创建固定操作栏时，我也遇到了这个问题。但是当我在该操作栏中添加Text时，该背景图像变得清晰。因此，如果我不想在操作栏上显示任何文字，我只需添加 作为文字的替代。

抱歉我的英文不好：D

Answer 3

取代用户可扩展=没有，而不是将其更改为用户可扩展= 0

Answer 4

试试这个：

img {
  transform: scale(1) rotate(0) translate3d(0,0,0);
}

Answer 5

<div style="position:fixed;"><img/></div>
<div style="position:fixed;"></div><!--add it-->

添加＆＃34;固定＆＃34;元素遵循＆＃34;固定＆＃34;，就像起来一样。

CSS位置：已修复导致Android浏览器中的图像模糊

5 个答案: