修复向下滚动时 Android Chrome 上背景图像下方的白条答案

【问题标题】：Fix white bar below background-image on Android Chrome when scrolling down修复向下滚动时 Android Chrome 上背景图像下方的白条
【发布时间】：2018-07-20 18:47:08
【问题描述】：

我正在将背景图像应用到网页，但是当我在我的 Android 设备上的 Chrome 应用中查看该网站时，当我向下滚动时，底部会出现一个白条。

我尝试了从旧帖子中找到的解决方案： White area on fixed background when scrolling on ios

它适用于三星互联网应用程序，但上述解决方案似乎不适用于 Android Chrome 应用程序

代码：

body{
  background-image: url('../images/fields-and-tree.jpg');
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0)
}

【问题讨论】：

标签： android html css google-chrome

【解决方案1】：

地址栏消失时出现白条。到目前为止，我发现的唯一纯 CSS“解决方案”是在移动设备上为 html 元素添加一些额外的高度。当地址栏出现时，这将裁剪您的背景图像，但它仍然比底部的大白条更好。

@media only screen and (max-device-width: 480px) {
    html {
      height: calc(100% + 60px);
      min-height: calc(100% + 60px);
    }
}

【讨论】：