修复了导航栏与 iPhone 版 Chrome 浏览器顶部分离的问题答案

【问题标题】：Fixed navbar separates from top of browser on Chrome for iPhone修复了导航栏与 iPhone 版 Chrome 浏览器顶部分离的问题
【发布时间】：2016-02-02 10:08:25
【问题描述】：

我有一个带有 bootstrap 固定到顶部导航栏 (example here) 的网站，并注意到在 iPhone 上使用 Chrome 时，导航栏在快速滚动时与屏幕顶部仅相隔几个像素.这显示在以下屏幕截图中，来自引导导航栏示例页面：

这只发生在 iPhone 上的 Chrome 上，而不是在 iPad 或我测试过的任何 Mac/PC 上。它也发生在我能找到的带有固定导航栏的每个网站上。我唯一能想到的是将导航栏的背景颜色扩展到浏览器顶部上方，这样当导航栏最终被拉下时，它不会完全与屏幕分离。然而，这仍然使导航栏的内容被拉下，而且看起来肯定是一个肮脏的修复。

还有其他人遇到过这个问题吗？是否有任何已知的修复方法可用？

【问题讨论】：

在这里注意到了同样的问题。我很高兴将其视为 Chrome 错误，因为这仅在您“下拉”刷新后才会发生。之后真的很困惑——但如果你执行的动作真的很慢，就不会发生这种情况。
尝试添加 padding-top:20px; top: -20px; - 也无济于事
而且 javascript 也无法解决它。试图在所有滚动事件/窗口调整大小事件上重新定位到顶部，但没有运气。似乎视口/寡妇被扭曲了。偶尔从纵向切换到横向也能重现。
这是一个铬错误 - 以下答案均未解决此问题。您可以在此处跟踪错误状态：bugs.chromium.org/p/chromium/issues/detail?id=609994

标签： html css iphone google-chrome

【解决方案1】：

我使用了一种巧妙的方法来弥补这个空白，
我将 padding-top:100px 设置为导航，然后将 margin-top:-100px,
所以当它再次发生时，间隙会被 padding-top 填补。

到目前为止一切正常，希望对您也有帮助。

【讨论】：

【解决方案2】：

好的，所以我遇到了同样的问题，在chrome中<body>的全部内容前有一个空格，最后找到的解决方案是什么？我在文档的开头有一个空格 ' ' 符号，在 <!DOCTYPE html> 标记之前，删除它可以修复所有问题。

不敢相信。

【讨论】：

【解决方案3】：

这不是一个解决方案，但在元素上方添加一个白条将通过防止内容达到峰值来改善这种情况：

.fixed-header:after {
    content: '';
    position: fixed;
    top: -20px;
    height: 20px;
    width: 100%;
    background-color: #fff; // whatever your nav background color is
}

【讨论】：

【解决方案4】：

大约一周前刚遇到同样的问题。我正在使用 Bootstrap 并在 iPhone 上的 Google Chrome 中发现了这个问题。尝试将<div class="wrapper"></div> 放在除了固定到顶部的导航栏之外的所有内容周围。完成后，使用以下 CSS 为您的页面设置样式：

body, html {
  width: 100vw;
  height: 100%;
  overflow-x: hidden !important;
  display: block;
  margin: 0;
  padding: 0;
}

body {
  background-color: white;
  overflow-x: hidden !important;
  width: 100vw;
  display: block;
}

html {
  overflow-x: hidden !important;
  width: 100vw;
  display: block;
}

.wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-y: scroll;
  overflow-x: hidden !important;
  height: 100vh;
  width: 100vw;
}

.navbar {
  height: 70px;
  width: 100%;
  position: absolute;
  background-color: indigo;
}

编辑：谷歌已经解决了这个问题，所以这不再是一个问题。感谢上帝！

【讨论】：

您答案中的position: absolute 的行为与所需的position: fixed 完全不同。据我所知，除了我的帖子中描述的黑客和另一个答案之外，没有其他方法可以解决这个问题，同时保持必要的固定位置。