防止固定位置背景图像:覆盖地址栏隐藏时在移动浏览器中调整大小

Question

很抱歉这个缺乏一个例子,但我觉得它很容易理解.

我的网站上有固定的背景,目前实现如下:

#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>

到目前为止,这在所有浏览器中都很棒,除了移动浏览器,它们在向下滚动时隐藏地址栏.隐藏地址栏时,视口会垂直展开,背景图像会自行调整大小.在这个特定的网站上,用户可以上下滚动,效果会分散注意力.

有关解决此问题或以不同方式实施背景的任何想法或策略？

我可以将整个东西包装在一个固定的容器中,并将overflow-y设置为滚动,这样可以防止地址栏被隐藏,但我不想这样做(Google Glass无法滚动浏览这些容器,哈哈...想在那里演示).

我一直在尝试考虑提供背景图像的东西:使用某种缓冲区覆盖功能,使其渲染大于视口,并且除非视口扩展到缓冲区之外,否则不会重新渲染,但我我不确定如何实现这一点.

编辑:我实际上已经实现了这一点,并在下面的答案中详细说明了该过程.但是,即使使用此缓冲区设置(将背景图像的高度扩展为比视口高度大60多个像素),在地址栏隐藏时,它仍会显示一个空白的背景颜色段,并且一旦显示停止滚动,它渲染其余的背景图像.

仍然在寻找一种方法来保持原生地址栏隐藏功能(现在已经在iOS 8中扩展到iPad上的iOS Safari),并且还有一个全屏幕背景图像,即使视口在隐藏地址时改变高度也始终呈现酒吧.开始怀疑我是否应该为所有浏览器提交错误报告...

Answer 1

将近 5 年后，由于 Safari 和现在 Android 版 Chrome 计算 vh 单位的方式发生了变化，终于有了解决方案。一探究竟！https://developers.google.com/web/updates/2016/12/url-bar-resizing

我在这个网站上实现了它（无法在任何代码操场上展示这一点，因为它们总是将结果嵌入到 iframe 中）：https : //www.cochranesupply.com

刚刚在背景元素上使用了以下代码：

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../images/background.jpg);
    background-size: cover;
    z-index: -1;
}

这就是全部！只需要适用于 Android 56 的 Chrome 或适用于 iOS 的 Safari（不确定是哪个版本，但这可能已经在 Safari 中使用了很长时间了）。