地址栏隐藏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;}