在地址栏隐藏的iOS /安卓/手机浏览器背景图像跳转 [英] Background image jumps when address bar hides iOS/Android/Mobile Chrome

问题描述

我目前正在开发使用Twitter引导一个负责任的网站。

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.

这几乎是完美的，除了一个问题。使用iOS的Safari浏览器，Android浏览器或Chrome在Android上的背景跳跃稍微当用户向下滚动页面，使得地址栏隐藏。

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.

在code我使用的背景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％的高度和固定。由于背景图像设定为覆盖，它将调整图像尺寸/位置作为含面积较大。

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。从理论上讲，这是优雅的解决方案。然而，内部监督办公室有一个VH错误（<一href="http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/">http://thatemil.com/blog/2013/06/13/viewport-relative-unit-strangeness-in-ios-6/).我试图用一个最大高度为prevent的问题，但它仍然存在。

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 = jQuery("#bg1, #bg2");
jQuery(window).resize("resizeBackground");
function resizeBackground() {
    bg.height(jQuery(window).height());
}
resizeBackground();

在一个侧面说明，我已经看到了这么多的问题，在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.

编辑：虽然上面的脚本作品完美从保持调整的背景下，它会导致明显的差距，当用户向下滚动。这是因为，它是保持尺寸的屏幕高度减去URL栏100％的背景。如果我们60PX添加到高度，瑞士指出，这个问题消失。它意味着我们没有机会看到背景图像的底部60PX时，地址栏是present，但prevents用户曾经看到一个空白。

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(jQuery(window).height() + 60);
}

这篇关于在地址栏隐藏的iOS /安卓/手机浏览器背景图像跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！