移动手机上的任务栏会改变CSS背景渐变

我正在尝试创建一个当前具有固定背景和线性渐变的页面，例如：

.content {
  display: grid;
  background: linear-gradient(to right, #3e5151, #decba4);
  background-attachment: fixed;
  min-height: 100vh;
}

因此，在桌面和移动设备上，这会填充视口，并且在滚动时不会因

背景附件：固定
属性而改变。我的问题是，在手机上，大多数手机都有可伸缩的地址栏或类似功能。在我的手机上，这个条位于底部，所以当我滚动时，这个条消失了，也就是说，给了我更多的高度。然而，这也意味着这个渐变背景需要重新渲染，直到我用手指松开它才会这样做。结果是底部出现一个白色条，直到使用新的“高度”视口重新渲染背景渐变。老实说，这看起来不太好

有没有办法解决这个问题，这样就不会发生这种情况，或者…？
这是一个棘手的解决方案，因为
100vh
在滚动时会改变高度。相反，如果你像这样把它放在
body
元素上会怎么样

body {
  display: grid;
  background: linear-gradient(to right, #3e5151, #decba4);
  background-attachment: fixed;
  min-height: 100vh;
}

“这不会导致同样的结果吗？@DenverDang不，事实上。这也是我最初的想法，但我做了一个演示，并在手机上进行了测试。我在您描述的
.content
中遇到了相同的问题，但在
body
中没有遇到。可能还有其他问题在起作用。对你有用吗？