javascript - Chrome Mobile 上的网站背景很颠簸

Question

在 Chrome Mobile 上，我网站的背景非常颠簸，并且上下出现白色部分。据我所知，这是因为隐藏了 URL 栏。

• 示例:https://www.youtube.com/watch?v=AtMcbLE803o

我用来添加背景的CSS:

html {
  background: url(user-images/background.png) no-repeat center center fixed;
  background-size: cover;
}

• 演示:http://jvnknvlgl.github.io/biography-website-template
• 来源:http://github.com/jvnknvlgl/biography-website-template

我想用 CSS 解决这个问题，但如果我必须使用 Javascript，我真的很想简单解释一下它是如何工作的，以及我应该如何将它添加到我的代码中，因为我没有使用过任何 Javascript还没有。

提前致谢!

Answer 1

0:14 into the video让我几乎可以肯定这是因为菜单栏隐藏在屏幕顶部。

发生这种情况时，页面的高度会发生变化。这与您的 min-height 和 max-height 值直接相关。

试试看是否有帮助。它可能不会。未应用最小/最大高度。

html {
  background-image: url("user-images/background.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

理论:

通过提供最大高度，您的 body 高度被限制在可用的屏幕空间内。如果删除它，正文高度将是整个文档、整个可滚动区域的大小，即使它不可见也是如此。

这应该可以消除闪烁，但可能会影响背景附件。但是，因为您使用的是固定附件，所以它仍应按预期工作。