移动滚动错误

Question

当我发现一个“错误”时，我正在开发一个小的单页下一页应用程序。
而且我不知道如何解决它。 Mobile Screen

网站链接：Preview

当前行为：
在移动设备上滚动时出现屏幕故障。

预期行为：
底部没有空格

重现步骤：

1. 向上滚动直到 Chrome 标题隐藏
2. 底部出现空白，而标题逐渐消失

由于某种原因，它在滚动时出现故障。 我尝试将正文设置为calc(100vh + 60px)（标题高度）

但这并不能解决问题。

短sn-p：

<main>
  <section className={'wrapper'}/>
  <section className={'wrapper'}/>
  <section className={'wrapper'}/>
  <section className={'wrapper'}/>
<main>

对应的CSS：

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  background-attachment: fixed;
  animation: gradient 15s ease infinite;
  height: calc(100vh + 60px);
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
main {
  min-height: 100vh;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrapper {
  height: calc(100vh - 100px);
  width: 100%;
  max-width: 1000px;
  padding-top: 80px;
}

上面链接的图片中的空白区域在滚动后自行修复。 它与 Chrome 标头的高度匹配 Chromeheader 似乎不影响height: 100vh 是我的 CSS 错误还是 Bug？

我使用的是一加 6 氧气操作系统 11.1.2.2 铬：98.0.4758.87

Answer 1

如果表头是固定的，则不需要计算，即使表头不固定，也必须减去而不是加。

试试看：

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  background-attachment: fixed;
  animation: gradient 15s ease infinite;
  height: 100vh;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
main {
  min-height: 100vh;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.wrapper {
  height: calc(100vh - 100px);
  width: 100%;
  max-width: 1000px;
  padding-top: 80px;
}