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

Question

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

jzp*_*p74 6 mobile html5 background css3 ios

我的目标是在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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

桌面上的一切运行良好.但是当我在ios上打开网站时(chrome或safari - 没什么区别)当我向下滚动时,屏幕底部会出现一个白色条.滚动停止时,栏会消失.您可以在手机上自行试用:https://jsbin.com/rudetokoxu

我试过这里发布的解决方案: CSS背景延伸到iOS填充高度,但滚动时有空白区域.解决方案似乎合乎逻辑我甚至尝试将背景div的高度设置为200%,但无济于事.

还试过: 移动IOS谷歌Chrome地址栏行为和这里: 当地址栏隐藏iOS/Android /移动Chrome 包括js解决方案时背景图像跳转(似乎其中一些不再工作所以我没有尝试所有的js解决方案)以及我能找到的关于这个主题的任何其他内容

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

顺便说一句:这个网站在移动设备上有同样的问题:http://www.laregiondesmusees.fr,但这个网站没有受到影响:http://www.heartkids.co.nz

Answer 1

小智 16

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

你会看到他们在背景图像上应用了2d变换.在大多数情况下,在带有背景图像的固定div上应用2d或3d变换可以消除不需要的白色空间.

这个CSS应该删除那个恼人的白条.干杯.

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，5 月前
查看次数：	9477 次
最近记录：	8 年，6 月前