地址栏隐藏 iOS/Android/Mobile Chrome 时背景图片跳转

Question

我目前正在使用 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;
}

欢迎所有建议 - 这已经让我头疼了一段时间！

原文由 Dave Clarke 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

1. 将#bg1、#bg2 高度设置为 100vh。理论上，这是一个优雅的解决方案。然而，iOS 有一个 vh 错误（ 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 上“隐藏”页面加载时的 URL 栏。

编辑：虽然上面的脚本非常适合防止背景调整大小，但当用户向下滚动时会导致明显的差距。这是因为它将背景大小保持为屏幕高度减去 URL 栏的 100%。如果我们按照 swiss 的建议将高度增加 60px，这个问题就会消失。这确实意味着当 URL 栏存在时我们看不到背景图像的底部 60 像素，但它可以防止用户看到间隙。

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

原文由 Jason 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

删除 position: fixed; 或 position: absolute; ，如果你的后台 div 中有任何一个，为我解决了这个问题。

原文由 Kiri 发布，翻译遵循 CC BY-SA 4.0 许可协议