当地址栏隐藏iOS / Android / Mobile Chrome时，背景图像会跳转
我目前正在使用Twitter Bootstrap开发一个响应式网站。
该网站在手机/平板电脑/桌面上拥有全屏幕背景图像。 这些图像使用两个div旋转和淡入。
这几乎是完美的，除了一个问题。 在Android上使用iOS Safari，Android Browser或Chrome时，当用户向下滚动页面并导致地址栏隐藏时，背景会略微跳跃。
该网站在这里：http://lt2.daveclarke.me/
在移动设备上访问它并向下滚动，您应该看到图像大小调整/移动。
我用于背景DIV的代码如下所示：
#bg1 {
background-color: #3d3d3f;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; position:fixed;
width:100%;
height:100%;
left:0px;
top:0px;
z-index:-1;
display:none;
}
所有建议欢迎 - 这一直在我的头一阵子！
这个问题是由于网址栏缩小/滑动并改变了＃bg1和＃bg2 div的大小，因为它们是100％高度和“固定”的。 由于背景图像设置为“覆盖”，因为包含区域较大，它将调整图像大小/位置。
基于网站的响应性，背景必须扩展。 我接受了两种可能的解决方案：
1）将＃bg1，＃bg2高度设置为100vh。 理论上，这是一个优雅的解决方案。 但是，iOS有一个vh bug（http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/）。 我试图用最大高度来防止这个问题，但它仍然存在。
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上加载网页的网址栏。
编辑：虽然上面的脚本完美保持背景调整大小，当用户向下滚动时会导致明显的差距。 这是因为它将背景大小保持为屏幕高度的100％减去URL栏。 如果我们在高度上增加60px，就像瑞士人所说的那样，这个问题就会消失。 这意味着当URL栏存在时，我们不会看到背景图像的底部60px，但它可以防止用户看到差距。
function resizeBackground() {
bg.height( $(window).height() + 60);
}
我发现Jason的回答对我来说并不是很有效，我仍然在跳跃。 Javascript保证页面顶部没有空隙，但是当地址栏消失/再现时，背景仍然在跳跃。 所以以及Javascript修正，我申请transition: height 999999s的股利。 这会创建一个持续时间很长的转换，以至于它几乎冻结了该元素。
我们网站的标头上有类似的问题。
html, body {
height:100%;
}
.header {
height:100%;
}
这将最终在android chrome上产生跳动的滚动体验，因为在url-bar隐藏并且手指从屏幕上移除后，.header-container将会重新调整比例。
CSS-解决方案：
添加以下两行，将阻止url-bar隐藏并且仍然可以垂直滚动：
html {
overflow: hidden;
}
body {
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
上一篇: Background image jumps when address bar hides iOS/Android/Mobile Chrome