Question

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

我尝试了一个从旧帖子中找到的解决方案： 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)
}

Answer 1

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

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

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

1 个答案: