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

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

这是我简化的HTML

  
 
 
 
Some text here
 
 
   

这是我的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背景延伸到iOS填充高度但滚动时有空白区域 。 解决方案似乎合情合理 我甚至尝试将背景div的高度设置为200％，但无济于事。

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

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

顺便说一句：这个网站在移动设备上有同样的问题： 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); }