【发布时间】：2014-06-11 13:43:24
【问题描述】：
抱歉，这方面的例子很少，但我认为它很容易理解。
我的网站有一个固定的背景，目前是这样实现的：
#background {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #28305e;
background-image: url(../images/background.jpg);
background-size: cover;
-moz-background-size: cover;
background-position: center center;
z-index: -10;
}
<div id="background"></div>
到目前为止，这在所有浏览器中都很棒，除了移动浏览器，它们在向下滚动时会隐藏地址栏。当地址栏被隐藏时，视口会垂直扩展，背景图像会自行调整大小。在这个特定的网站上，用户通常会上下滚动，而且效果会分散注意力。
关于解决此问题或以不同方式实现背景的任何想法或策略？
我可以将整个内容包装在一个固定的容器中，并将溢出-y 设置为滚动，这样可以防止地址栏被隐藏，但我不想这样做（Google Glass 无法滚动浏览那些容器，哈哈……也想在那里演示）。
我一直在尝试提供背景图像：使用某种缓冲区覆盖功能，以便它呈现大于视口，并且除非视口扩展超出该缓冲区，否则不会重新渲染，但我不确定如何实现。
编辑：我确实实现了这一点，并在下面的答案中详细说明了该过程。但是，即使使用此缓冲区设置（将背景图像的高度扩展为比视口高度大 60+ 像素），在地址栏隐藏时，它仍然会显示一个空白的背景色段，并且一旦你停止滚动，它会渲染背景图像的其余部分。
仍在寻找一种方法来保持本机地址栏隐藏功能（现已在 iOS 8 中扩展到 iPad 上的 iOS Safari），并且还有一个全屏背景图像，即使视口改变高度时也始终完全呈现隐藏地址栏。开始怀疑我是否应该为所有浏览器提交错误报告...
【问题讨论】：
-
这已经成为一个更大的问题，因为 iPad 上的 iOS 8 上的 Safari 现在做了同样的事情：向下滚动时缩小浏览器标题。
-
嘿@addMitt，似乎没有一个解决方案能完美运行。你找到解决这个问题的方法了吗？
-
我没有，最近的测试表明同样的问题仍然存在。我已经停止开发具有全屏背景图像的移动页面。这将正常工作的唯一方法是，如果我们被允许使固定容器大于视口高度，并且当您向下滚动并隐藏地址栏时，浏览器会正确呈现背景图像的其余部分，而不是将其显示为完全白色，直到您停止滚动。然而，这需要在浏览器中修复。
标签： html css background-image mobile-browser cover