移动浏览器中页脚图像的一个像素位移？

Question

我们网站上的页脚在移动浏览器上被替换为1px，我们不明白为什么。

以下是iPad上的外观屏幕截图。页脚顶部的1px绿线不会出现在桌面浏览器中 - 仅在移动设备上显示（在iPhone和iPad Chrome和Safari上测试）。

如果您想亲眼看到这一点，请访问www.panabee.com。

任何人都可以解释为什么会这样吗？

谢谢！

Answer 1

这是一个时髦的问题。我在不同的缩放级别上看到的方式不同。

将#page_box中的最后一个div更改为以下样式：

#all_icons {
    margin: 60px auto 54px auto
}

在iPad上以默认缩放级别修复了它。

但是，我看到它以不同的缩放级别返回。我尝试用透明像素换掉图像，看看它是否会消失。我怀疑它与该图像有关。

Answer 2

这看起来像是因为您的网页被缩放而导致的舍入错误。

如果您未在页面上设置viewport metatag，则无论方向如何，默认视口宽度都将设置为980像素。这意味着在横向方向上，当设备宽度为768像素时，页面必须缩小到78％左右。

如果您的页面设计依赖于与像素完美精度对齐的各个部分，那么这必然会不时失败。我希望较新版本的webkit可以更好地处理这类事情，因为它们最近已转移到subpixel layout units，但这并不总是有帮助。

假设这是问题所在，您应该可以通过向页面添加视口元数据来修复它：

<meta name="viewport" content="width=device-width">

然后，您需要使用媒体查询来调整布局，以便更好地处理不同的设备宽度，因为您不能再依赖浏览器为您缩放网页了。

即便如此，您也无法保证您的css像素必然会转换为精确的设备像素，因为某些移动设备可能具有非整数device pixel ratios。它应该至少可以解决你在iPad上的问题，因为它的设备像素比率为1或2（取决于你是否有视网膜显示器）。

如果媒体查询看起来太费劲，我建议你只需将#footer_top向下移动一个像素，但看起来你已经做到了。那有没有帮助？

Answer 3

我无法在我的iPad上重现这个问题（也许你已经调整了一些东西）但我认为你可以在#footer_top和#footer上使用background-origin: border-box;来解决这个问题。

Answer 4

我可以在iPhone 4S running iOS 6.1.3上看到问题，当我放大时它会消失。但我也可以使用Google Chrome Version 26.0.1410.64 m重现该问题。当我放大到110%以上的任何位置时（显然更容易发现更高的缩放级别）我可以看到一条绿线稍微出现，然后随着图像在几秒钟内变得更清晰而消失。在300%，线条不再消失，它将始终可见，同时图像不再变得更清晰，但是在更高的缩放级别，线条永远不会出现。

看到图像越来越清晰，然后看到线条消失，这让我相信问题可能在于图像被保存为interlaced image。显然你可能是故意这样做的，因为这不是一件坏事。在这种情况下，您还会知道隔行扫描图像可以将其显示为自身的降级副本，而它只是部分地被其预期收件人（在这种情况下是您网站上的访问者）接收。

现在我从来没有听说过移动野生动物园中隔行扫描图像有任何问题，但doing a Google search did turn up some results。包括a result to a question with some useful answers here on SO。问题似乎已经从iOS 6更新开始。大多数问题似乎都可以通过图像上的关闭透明度或关闭隔行扫描选项保存图像来解决。

所以我建议您尝试这些选项，看看是否能解决问题。或者如果你真的需要隔行扫描，可以使用支持隔行扫描的不同图像格式（浏览器可以在不同的格式之间处理它？）。

我觉得非常有趣的是，谷歌浏览器似乎没有在更高的缩放级别上使用隔行扫描，我想当你放大图像时尝试使图像更加清晰是没有意义的已经很多了？

我会发现阅读一些关于不同浏览器如何为支持它的不同格式处理隔行扫描的文档很有意思。我真的找不到任何东西（但我看起来不太好）。它可能会说明为什么一些问题已经开始出现在iOS 6及更高版本中，对我来说，看起来iOS 6上的移动版Safari不支持交错PNG图像，因为我可以在Chrome中重现这个问题，我想它可能是基于WebKit的浏览器的问题，但是我的Safari 5.1.7在所有缩放级别上做了正确的事情。

无论如何，我希望其中一条建议可以解决你的问题。

Answer 5

尝试将#footer_top的CSS更改为：

#footer_top{

    background: transparent url(/images/footer_header.png) repeat-x center -1px;
    height: 72px;
    position: relative;
    top: 1px;

}

基本上，如果你将背景图像拉出1像素像素并将div面板拉下1px，它应该有助于解决问题。

Answer 6

以下是修复：

#footer_top {
background: transparent url(/images/footer_header.png);
height: 72px;
position: relative;
background-position-y: -1px;
}

这与背景重复的事实有关，虽然奇怪的是，添加repeat-x并不能解决它，因为它似乎是重复底部像素到顶部。我在图像的边缘碰到了类似的东西，我认为这是webkit在图像边缘插值的方式中的错误。无论如何，我所做的只是隐藏顶部像素，但你可能会发现在底部放置一个重复的透明像素也可以解决你的问题（尽管在我的其他项目中它没有）。