地址栏隐藏iOS / Android / Chrome浏览器时背景图片会跳转

Question

我目前正在使用Twitter Bootstrap开发一个响应式网站。该网站在移动设备/平板电脑/桌面上具有全屏背景图片。这些图像使用两个div旋转并逐渐淡入。除了一个问题，它几乎是完美的。使用iOS Safari，Android浏览器或Android上的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;}欢迎所有建议-这已经让我有一段时间了！

Answer 1

我发现Jason的答案对我而言并不奏效，而且我仍在不断进步。Javascript确保页面顶部没有空隙，但是每当地址栏消失/重新出现时，背景仍然在跳跃。因此，除了Javascript修复程序之外，我还适用transition: height 999999s于div。这将创建一个持续时间很长的过渡，以至于实际上冻结了元素。

Answer 2

我的网站标题上也有类似的问题。

html, body {

    height:100%;

}

.header {

    height:100%;

}

这最终会在android chrome上产生跳跃式滚动体验，因为在隐藏网址栏并将手指从屏幕上移开后，.header-container会重新缩放。

CSS解决方案：

添加以下两行将防止url栏隐藏并且仍然可以进行垂直滚动：

html {

    overflow: hidden;

}

body {

    overflow-y: scroll;

    -webkit-overflow-scrolling:touch;

}