iOS上的滚动时的固定背景白色区域 [英] White area on fixed background when scrolling on ios
问题描述
我的目的是让在iOS / Android的缩放的背景下，没有用户滚动后重新调整下来（和地址栏消失）。我发现有用的答案几个问题但不知何故，我一直有我的iPhone令人讨厌的行为。我用的引导。
My aim is to have a scaled background on iOS/Android that doesn't have to rescale after user scrolls down (and the address bar disappears). I found several questions with useful answers but somehow I keep having annoying behaviour on my iPhone. I use Bootstrap.
下面是我简单的HTML
Here's my simplified HTML
<html>
<body>
<div id="background-img"></div>
<div id="layout" class="container">
<div id="content-main" class="col-xs-12">
<p>Some text here</p>
</div>
</div>
</body>
</html>
下面是我的CSS
html {
height: 100%; }
body {
position: relative;
/* required for scrollspy */
font-family: Arial, Helvetica, Sans-Serif;
font-size: 30px;
font-weight: normal;
height: 100%;
color: white;
overflow: scroll;
-webkit-overflow-scrolling: touch;
/* smooth scrolling on ios */ }
#background-img {
width: 100%;
top: 0;
left: 0;
bottom: -80px;
position: fixed;
z-index: -1;
background: url("http://www.casapanorama.nl/sites/all/themes/casapanorama/images/bg-klaprozen-1-w1000.jpg") no-repeat center center;
background-size: cover;
}
#content-main { //nothing fancy }
一切都运行在桌面上的罚款。但是，当我打开网站上的IOS（Chrome或Safari - 没有区别）我得到在屏幕底部的白色栏时，我向下滚动。当滚动停止酒吧消失。你可以尝试一下自己在移动： https://jsbin.com/rudetokoxu
我试过的解决方案张贴在这里：
<一href=\"http://stackoverflow.com/questions/22741143/css-background-stretches-to-fill-height-in-ios-but-there-is-white-space-on-scrol\">CSS背景延伸，填补了iOS的高度，但没有对滚动的空白。这里的解决方案似乎是合乎逻辑的。我甚至试过背景div的高度设置为200％，但无济于事。
I tried solutions posted here: CSS background stretches to fill height in iOS but there is white space on scroll. Solution here seems logical. I even tried setting the height of the background div to 200% but to no avail.
也试过：
<一href=\"http://stackoverflow.com/questions/18773174/mobile-ios-google-chrome-address-bar-behaviour\">mobile IOS谷歌浏览器的地址栏行为
和这里：
<一href=\"http://stackoverflow.com/questions/24944925/background-image-jumps-when-address-bar-hides-ios-android-mobile-chrome\">Background当地址栏隐藏的iOS / Android /行动Chrome浏览器图像跳转
包括JS解决方案（它似乎是他们中的一些，所以我没有尝试所有的JS的解决方案没有工作了），和其他任何我能找到的主题
Also tried: mobile IOS Google chrome address bar behaviour and here: Background image jumps when address bar hides iOS/Android/Mobile Chrome including the js solutions (it seemed that some of them did not work anymore so I did not try all the js solutions) and anything else I could find on the subject
请帮我解决这个还是说服我从来没有三思而后是烦人的小东西像这样（COS生活充满了他们的:-)）
Please help me solve this or convince me never to think twice about anoying little things like these (cos life is full of them :-) )
BTW：这个网站与移动同样的问题： http://www.laregiondesmusees.fr ，但本网站不吃亏： http://www.heartkids.co.nz
BTW: this site has the same problem on mobile: http://www.laregiondesmusees.fr, but this site does not suffer: http://www.heartkids.co.nz
推荐答案
我觉得你的痛苦。如果你在这个例子仔细观察，你发现那里是没有空白的问题（ http://www.heartkids.co.nz ） - 答案是有，但很难找到，除非你知道你在找什么。
I feel your pain. If you look carefully at the example you found where there was no white space problem (http://www.heartkids.co.nz) - the answer was there, but hard to find unless you know what you are looking for.
您会看到他们申请的背景图像上的2D变换。在应用无论是2D或3D变换固定的div背景图片大多数情况下，摆脱不必要的空格是这样的。
You'll see they applied a 2d transform on the background image. In most cases applying either a 2d or a 3d transform on fixed divs with background images gets rid of unwanted white space like this.
这个CSS应该删除恼人的白条。干杯。
This CSS should remove that annoying white bar. Cheers.
.background-img {
transform: translate3d(0,0,0);
}
这篇关于iOS上的滚动时的固定背景白色区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
