Question

我的目标是在iOS / Android上设置缩放背景，用户向下滚动后不必重新缩放（地址栏消失）。我找到了几个有用答案的问题，但不知怎的，我在iPhone上一直有烦人的行为。我使用Bootstrap。

这是我的简化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

我尝试过这里发布的解决方案： CSS background stretches to fill height in iOS but there is white space on scroll。解决方案似乎合乎逻辑我甚至尝试将背景div的高度设置为200％，但无济于事。

还尝试过： mobile IOS Google chrome address bar behaviour 和这里： Background image jumps when address bar hides iOS/Android/Mobile Chrome 包括js解决方案（似乎其中一些不再起作用，所以我没有尝试所有的js解决方案）以及我能在这个主题上找到的任何其他内容

请帮我解决这个问题，或者说服我永远不要三思而后行这些烦人的小事（cos生活充满了他们:-)）

BTW：此网站在移动设备上存在同样的问题：http://www.laregiondesmusees.fr，但此网站不会受到影响：http://www.heartkids.co.nz

Answer 1

我感觉到你的痛苦。如果你仔细看一下你发现没有空格问题的例子（http://www.heartkids.co.nz） - 答案就在那里，但除非你知道你在寻找什么，否则很难找到。

您会看到他们在背景图片上应用了2d变换。在大多数情况下，在带有背景图像的固定div上应用2d或3d变换可以消除不需要的空白区域。

这个CSS应该删除那个恼人的白条。欢呼声。

.background-img {
   transform: translate3d(0,0,0);  
}

在ios上滚动时固定背景上的白色区域

1 个答案: