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

该网站具有跨手机/平板电脑/桌面的全屏背景图片。

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

这几乎是完美的，除了一个问题。使用iOS Safari，Android浏览器或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.

网站位于： a href =http://lt2.daveclarke.me/> http://lt2.daveclarke.me/

The site is here: 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 divs，因为它们是100％的高度和固定。由于背景图片设置为覆盖，它会根据包含区域的大小调整图片大小/位置。

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();

在一个侧面的注释，我看到这么多问题，这些调整大小的URL栏在iOS和Android 。我理解的目的，但他们真的需要考虑他们带给网站的奇怪的功能和破坏。最新的变化是，您不能再在iOS或Chrome上使用滚动技巧隐藏网页加载的网址栏。

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.

编辑：虽然上述脚本完美地保持背景不调整大小，当用户向下滚动时，会导致明显的差距。这是因为它将背景的大小设置为屏幕高度减去网址栏的100％。如果我们为高度添加60px，正如瑞士人的建议，这个问题就消失了。这意味着当网址栏出现时，我们不会看到背景图片的底部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屋！