视口背景-图像小偏移

Posted 2023-03-12

【中文标题】视口背景-图像小偏移

【英文标题】：Viewport background-image small offset

【发布时间】：2016-05-01 10:52:16

【问题描述】：

所以这个问题我已经有一段时间了。当我在 iPad 上加载我的网站 (ysbakker.eu) 时，背景图像（比我的屏幕分辨率大得多）在右侧和底部有 1 或 2 个像素的偏移。这可能看起来像一个小问题，但它实际上困扰了我很多。我不知道是什么原因造成的，可能是视口渲染引擎中的一个小错误。 我的 iPhone 4s 上没有这个问题，它使用与我的 iPad Air 2 相同的软件。

这里有一张图片来显示我在说什么：

在图像上可能不容易看到，因为偏移量也是白色的......但它确实存在，相信我。放大后可以看得更清楚。

背景图片托管在 photobucket 上，我也尝试将其存储在我自己的服务器上，但这并没有改变任何东西。这是我的css供参考：

body 
    background: url('http://i95.photobucket.com/albums/l159/ysbakk3r/478769_zpsbe3rwtgu.jpg');
    background-size: cover;
    background-position: center;

我在这里遗漏了什么重要的东西吗？我认为它不应该像这样显示我的代码的偏移量。有什么建议吗？

编辑：我想我找到了问题，只是不知道如何解决。当我在 iPad 上放大并一直向右滚动时，不再有偏移。所以我猜页面被缩小了一小部分。有关如何解决此问题的任何建议？

【参考方案1】：

请试试这个：

body 
    background: url('http://i95.photobucket.com/albums/l159/ysbakk3r/478769_zpsbe3rwtgu.jpg');
    background-size: cover;
    background-position: center;
    margin:0

【讨论】：

satya的意思是：添加0的边距，因为body默认在四面都有一个小的边距。添加 0 的边距会删除它。

感谢您的建议，但它并没有删除右侧的偏移量，只是在底部（这是一个轻微的改进！）。所以谢谢，没想到。和 ty @Persijn 进行解释。但它仍然没有完全解决：s 我的桌面上没有这个问题，这更奇怪。我将尝试在我的 iPad 上使用不同的浏览器，看看这是否是 Safari 独有的问题。

不，在 Chrome 上打开我的网站时会出现同样的问题。它可能与分辨率有关......我会进一步研究它并让您随时了解结果。

我想我找到了问题，只是不知道如何解决它。当我在 iPad 上放大并一直向右滚动时，不再有偏移。所以我猜页面被缩小了一小部分。关于如何解决这个问题的任何建议？ （顺便说一句，底部偏移量也回来了，我想它只是缓存错误）