html - 在移动设备上滚动时，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 始终是最小顶部栏底部和屏幕底部之间的高度。
在较旧的设备中，情况并非如此，因此当用户通过滚动摆脱某些浏览器顶部栏时，vh 会发生变化。
引入此修复是为了阻止您所看到的现象，以及滚动时元素大小的潜在“跳跃”。它引入了另一个问题，即当用户第一次进入页面时，并非所有背景都会显示。
在您的情况下，这并不明显，因为在您的图像底部有一段距离的纯色。底部附近是否有文字会很重要。
您也许可以通过使用绝对放置的元素或伪元素来解决您的问题，这些元素具有相同的背景，但电压为 100vh 加上一点。这可能有效，即。考虑到您的图像的性质，它提供了一个可见的连接。
虽然不是通用的解决方案，但我意识到。