CSS的位置是：固定导致图像模糊的安卓浏览器图像、模糊、浏览器、位置

2023-09-05 05:55:18 作者：水杯易碎人心可畏

没有人会相当回答这个类似的问题，

No one ever quite answered this similar question,

Blurry股票Android浏览图片

所以我要发布具体的我自己的版本，以我的情况。

So I'm going to post my own version specific to my situation.

问题是，的位置是：固定导致子图像元素会模糊一些Android的浏览器。在我的情况下，导致Galaxy Note的V1运行Android 4.0到遇到此问题的股票浏览器。其他人则表示，同样的事情有些银河S3。这是我的code：

The problem is that position:fixed causes child image elements to be blurry in some android browsers. In my case, it causes the stock browser of Galaxy Note v1 running Android 4.0 to experience this issue. Others have said the same thing for some Galaxy S3. Here's my code:

preVIEW @ http://jl.evermight.net/blurryposition/

Preview @ 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测试的标志是模糊在第一。如果删除的位置是：固定从＃顶级导航容器，则该标志是清晰和明确的。所以我的问题是，我如何保持两者位置：固定和清晰的标志

You'll notice that the OPTIX Testing logo is blurry at first. If you remove position:fixed from the #top-nav-container, then the logo is crisp and clear. So my question is, how do I keep both position:fixed and a crisp logo?

在我真正的网站，在顶部导航应该是当你通过该网站滚动保持固定。我试图用的位置是：绝对和使用JavaScript来重新定位在滚动的顶部导航，但造成了一大堆跳跃/闪烁效果。所以，如果我不能使用的位置是：固定或的位置是：绝对以固定顶部导航的顶部移动网络浏览器，我有哪些其他的选择？如何做其他的移动网站实现这个结果？

In my real website, the top navigation is supposed to stay fixed while you scroll through the site. I tried using position:absolute and using javascript to reposition the top navigation on scroll, but that caused a whole bunch of jumping/flickering effects. So if I can't use position:fixed or position:absolute to fix the top navigation to the top of a mobile web browser, what are my other options? How do other mobile websites achieve this result?

其他信息：

我做了一些更多的实验与调整图像，改变视口和改变位置：固定/绝对和得出了一些有趣的结果。请看下图：

I did some more experiments with the resizing image, changing view port, and changing the position:fixed/absolute and came to some interesting results. See below:

的位置是：固定无背景大小视口 - 模糊的位置是：固定无背景无大小，视 - 清脆的位置是：固定的背景大小：20％与视口 - 模糊

的位置是：固定的背景大小：20％，无视口 - 模糊 position:fixed no-background-size with-viewport - fuzzy position:fixed no-background-size without-viewport - crisp position:fixed background-size:20% with-viewport - fuzzy

position:fixed background-size:20% without-viewport - fuzzy

的位置是：绝对没有背景大小与视口 - 模糊

position:absolute no-background-size with-viewport - fuzzy

下面是如何看这个图：

第一列的状态是否＃顶级导航容器使用位置：固定或位置：绝对

first column states whether #top-nav-container is using position:fixed or position:absolute

第二列的状态，如果我用背景尺寸：20％或者，如果我忽略它

second column states if i used background-size:20% or if i omitted it

第三列国家是否我包括＆LT;荟萃视＆GT; 头标记

third column states whether i included the <meta viewport> tag in the head

第四列国Optix公司的测试图案是否模糊或不清晰的。

fourth column states whether the optix testing logo is fuzzy or crisp.

结果看，你可以看到，唯一的一次，你得到一个清晰的图像与一个容器，它具有位置：固定的是当一个图像没有被拉长或COM pressed通过后台尺寸或或与视口。此外，唯一的一次，你得到一个模糊的图像与一个容器，它具有位置：绝对是，当图像被拉伸背景，大小和视口

Looking at the results, you can see that the only time you get a crisp image with a container that has position:fixed is when an image has not been stretched or compressed via background-size or or with the view port. Also, the only time you get a fuzzy image with a container that has position:absolute is when an image has been stretched with background-size and with a viewport.

CSS的位置是：固定导致图像模糊的安卓浏览器图像、模糊、浏览器、位置

推荐答案