相关疑难解决方法(0)

我目前正在使用Twitter Bootstrap开发响应式网站.

该网站在移动设备/平板电脑/台式机上提供全屏背景图像.这些图像使用两个div旋转并淡入每个图像.

除了一个问题,它几乎是完美的.在Android上使用iOS Safari,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;
}

欢迎所有建议 - 这已经有一段时间了!

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

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

#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),并且还有一个全屏幕背景图像,即使视口在隐藏地址时改变高度也始终呈现酒吧.开始怀疑我是否应该为所有浏览器提交错误报告...