地址栏隐藏 iOS/Android/Mobile Chrome 时背景图片跳转 [英] Background image jumps when address bar hides iOS/Android/Mobile Chrome

问题描述

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

I'm currently developing a responsive site using Twitter Bootstrap.

该网站在移动设备/平板电脑/桌面设备上都有全屏背景图片.这些图像使用两个 div 旋转和淡入淡出.

The site has a full screen background image across mobile/tablet/desktop. These images rotate and fade through each, using two divs.

除了一个问题，它几乎是完美的.在 Android 上使用 iOS Safari、Android 浏览器或 Chrome 时，当用户向下滚动页面并导致地址栏隐藏时，背景会略微跳转.

It's nearly perfect, except one issue. Using iOS Safari, Android Browser or Chrome on Android the background jumps slightly when a user scrolls down the page and causes the address bar to hide.

网站在这里:http://lt2.daveclarke.me/

在移动设备上访问它并向下滚动，您应该会看到图像调整大小/移动.

Visit it on a mobile device and scroll down and you should see the image resize/move.

我用于后台 DIV 的代码如下:

The code I'm using for the background DIV is as follows:

#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;
}

欢迎提出所有建议 - 这已经困扰了我一段时间了！！

All suggestions welcome - this has been doing my head in for a while!!

推荐答案

此问题是由 URL 栏缩小/滑开并更改 #bg1 和 #bg2 div 的大小引起的，因为它们是 100% 高度和固定".由于背景图片设置为cover"，它会随着包含区域变大而调整图片大小/位置.

This issue is caused by the URL bars shrinking/sliding out of the way and changing the size of the #bg1 and #bg2 divs since they are 100% height and "fixed". Since the background image is set to "cover" it will adjust the image size/position as the containing area is larger.

根据网站的响应性质，背景必须缩放.我有两种可能的解决方案:

Based on the responsive nature of the site, the background must scale. I entertain two possible solutions:

1) 将 #bg1、#bg2 高度设置为 100vh.理论上，这是一个优雅的解决方案.但是，iOS 有一个 vh 错误(http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/).我尝试使用 max-height 来防止这个问题，但它仍然存在.

1) Set the #bg1, #bg2 height to 100vh. In theory, this an elegant solution. However, iOS has a vh bug (http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/). I attempted using a max-height to prevent the issue, but it remained.

2) 由 Javascript 确定的视口大小不受 URL 栏的影响.因此，可以使用 Javascript 根据视口大小在 #bg1 和 #bg2 上设置静态高度.这不是最好的解决方案，因为它不是纯 CSS 并且页面加载时有轻微的图像跳转.但是，考虑到 iOS 的vh"错误(在 iOS 7 中似乎没有修复)，这是我看到的唯一可行的解​​决方案.

2) The viewport size, when determined by Javascript, is not affected by the URL bar. Therefore, Javascript can be used to set a static height on the #bg1 and #bg2 based on the viewport size. This is not the best solution as it isn't pure CSS and there is a slight image jump on page load. However, it is the only viable solution I see considering iOS's "vh" bugs (which do not appear to be fixed in iOS 7).

var bg = $("#bg1, #bg2");

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

$(window).resize(resizeBackground);
resizeBackground();

顺便说一句，我在 iOS 和 Android 中看到了这些调整 URL 栏大小的问题.我理解其目的，但他们确实需要仔细考虑它们给网站带来的奇怪功能和破坏.最新的变化是，您不能再使用滚动技巧在 iOS 或 Chrome 上的页面加载时隐藏"URL 栏.

On a side note, I've seen so many issues with these resizing URL bars in iOS and Android. I understand the purpose, but they really need to think through the strange functionality and havoc they bring to websites. The latest change, is you can no longer "hide" the URL bar on page load on iOS or Chrome using scroll tricks.

虽然上面的脚本可以完美地防止背景调整大小，但当用户向下滚动时，它会导致明显的间隙.这是因为它将背景大小保持为屏幕高度减去 URL 栏的 100%.如果我们将高度增加 60 像素，就像瑞士人建议的那样，这个问题就会消失.这确实意味着当 URL 栏存在时，我们无法看到背景图片底部 60 像素，但它可以防止用户看到间隙.

While the above script works perfectly for keeping the background from resizing, it causes a noticeable gap when users scroll down. This is because it is keeping the background sized to 100% of the screen height minus the URL bar. If we add 60px to the height, as swiss suggests, this problem goes away. It does mean we don't get to see the bottom 60px of the background image when the URL bar is present, but it prevents users from ever seeing a gap.

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

这篇关于地址栏隐藏 iOS/Android/Mobile Chrome 时背景图片跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！