防止固定位置背景图像：在地址栏隐藏时，在移动浏览器中调整大小 [英] Prevent fixed-position background-image: cover from resizing in mobile browsers upon address bar hide

问题描述

我有一个固定的背景，我的网站，这是目前实现像这样：

  #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滚动，防止地址栏被隐藏，但是我不想这样做（谷歌眼镜不能滚动这些容器，哈哈...也想在那里演示）。

一直在想的东西，提供背景图像：覆盖功能与某种类型的缓冲区，使其渲染大于视口，并将不会重新渲染，除非视口扩展超出该缓冲区，但我不知道如何实现。

EDIT ：我实际上已经实现了这一点，并在下面的答案中详细说明了过程。但是，即使使用此缓冲区设置（将背景图像的高度扩展为大于视口高度的60+像素），在地址栏隐藏时，仍显示空白的背景颜色段，停止滚动，它呈现其余的背景图像。

仍在寻找一种方式来保持本地地址栏隐藏功能（现在已扩展到iOS Safari iPad在iOS 8），并且还有一个全屏幕的背景图像，即使视口在隐藏地址栏时改变高度总是完全呈现。开始怀疑我是否应该为所有浏览器提交错误报告...

解决方案

，将固定的背景附加到html元素，如此。

  html {
 background：url（../ img / bg.jpg）无重复中心固定; 
 background-size：cover; 
 height：100％; 
 overflow：hidden; 
} 
  

然后设置滚动到正文。

  body {
 height：100％; 
 overflow：scroll; 
} 
  

您仍然需要IE 8的background div，因为它不支持background-size属性，因此移动浏览器应该隐藏它。最简单的方法是利用IE 8无法读取媒体查询

  @media only screen {#background {display ： 没有; }} 
  

Sorry for a lack of example on this one, but I figure it's easy enough to understand.

I have a fixed background on my site, which is currently implemented like this:

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

This is great in all browsers so far except for mobile browsers where they hide the address bar upon scroll-down. When the address bar is hidden, the viewport expands vertically, and the background-image jarringly resizes itself. On this particular site it will be common for users to scroll up and down, and the effect is distracting.

Any ideas or strategies on working around this or implementing the background in a different way?

I could wrap the entire thing in a fixed container, and set the overflow-y to scroll, which prevents the address bar from ever being hidden, but I'd prefer not to do this (Google Glass can't scroll through those containers, haha... Would like to demo on there as well).

I've been trying to think of something that provides background-image: cover functionality with some sort of buffer, so that it renders larger than the viewport, and won't re-render unless the viewport is expanded beyond that buffer, but I'm not sure how to implement that.

EDIT: I actually did implement this and detailed the process in an answer below. However, even with this buffer setup (which extends the height of the background image to be 60+ pixels larger than the viewport height), upon the address bar hiding, it still shows a blank background-color segment that gets revealed, and once you stop scrolling, it renders the rest of the background image.

Still looking for a way to keep the native address bar hide functionality (which has now been expanded to iOS Safari on iPad in iOS 8), and also have a fullscreen background image that always fully renders even if the viewport changes height when hiding the address bar. Starting to wonder if I should just be filing bug reports for all the browsers...

解决方案

For mobile safari you must, unintuitively, attach fixed backgrounds to the html element like so.

html {
    background: url(../img/bg.jpg) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}

Then set the scrolling to the body.

body {
    height: 100%;
    overflow: scroll;
}

You'll still need the background div for IE 8 since it doesn't support the background-size property, so mobile browsers should hide it. The cleanest way to do this is to exploit IE 8's inability to read a media query

@media only screen { #background { display: none; }}

这篇关于防止固定位置背景图像：在地址栏隐藏时，在移动浏览器中调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！