此问题是由于URL栏缩小/滑出并更改＃bg1和＃bg2
div的大小而引起的，因为它们是100％高度且已“固定”。由于背景图像设置为“覆盖”，因此随着包含区域的增大，它将调整图像的大小/位置。

根据站点的响应性质，背景必须扩展。我接受两种可能的解决方案：

1）将＃bg1，＃bg2高度设置为100vh。从理论上讲，这是一个优雅的解决方案。但是，iOS有一个vh错误。我尝试使用最大高度来防止出现此问题，但问题仍然存在。

2）当视口大小由Javascript确定时，不受URL栏的影响。因此，可以使用Javascript根据视口大小在＃bg1和＃bg2上设置静态高度。这不是最佳解决方案，因为它不是纯CSS，并且页面加载时图像略有跳跃。但是，考虑到iOS的“
vh”错误（这在iOS 7中似乎未修复），这是我看到的唯一可行的解​​决方案。

var bg = $("#bg1, #bg2");

function resizeBackground() {
    bg.height($(window).height());
}

$(window).resize(resizeBackground);
resizeBackground();

附带说明一下，我在iOS和Android中看到了这些重新设置URL栏大小的问题。我知道目的，但他们确实需要考虑带给网站的奇怪功能和破坏。最新变化是，您不再可以使用滚动技巧在页面加载时“隐藏”
iOS或Chrome上的URL栏。

编辑：虽然上面的脚本可以完美地防止后台调整大小，但是当用户向下滚动时，会导致明显的间隙。这是因为它将背景大小保持为屏幕高度减去URL栏的100％。如瑞士人所建议，如果将高度增加60像素，此问题将消失。这确实意味着当出现URL栏时，我们看不到背景图像的底部60像素，但是它防止用户看到间隙。

function resizeBackground() {
    bg.height( $(window).height() + 60);
}