在移动设备上滚动时，CSS 全屏背景在底部显示白条

Question

我有一个全屏背景图片的网站。

html, body {
  height: 100vh;
}

html {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

此代码在大多数设备上运行良好，但在一些旧的 Android 设备上，向下滚动时会导致问题。部分向下滚动但不松开手指会显示一个与 URL 栏大小相同的白色栏，同时消失。一旦你松开手指，背景就会自行修复。

这就是图像在滚动中的样子。

有没有办法确保背景总是填满页面？

---

编辑：我还尝试添加具有这些属性的 div：

#background {
  background: url('/img/background.jpg') no-repeat center center fixed;
  background-size: cover;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200vh;
}

这显示了背景，但发生了同样的问题。

Answer 1

在 IOS 和较新的 Android 设备上，vh 已得到修复，因此 100vh 始终是最小顶栏底部与屏幕底部之间的高度。

\n

在旧设备中情况并非如此，因此当用户通过滚动摆脱某些浏览器顶部栏时 vh 会发生变化。

\n

引入此修复是为了阻止您所看到的现象，以及滚动时元素大小中潜在的 \xe2\x80\x98jumping\xe2\x80\x99 。它引入了另一个问题，即当用户第一次进入页面时，并非所有背景都会显示。

\n

在您的情况下，由于图像底部一定距离的纯色，因此 \xe2\x80\x99t 并不明显。如果底部附近有文字，那就很重要了。

\n

您也许可以通过使用绝对放置的元素或伪元素来解决您的问题，它们具有相同的背景，但 100vh 加上一点。这可能有效，即。考虑到图像的性质，它提供了可见的连接。

\n

我意识到这不是一个通用的解决方案。

\n