固定导航栏与Chrome for iPhone上的浏览器顶部分开

问题描述 投票：13回答：4

我有一个带有自举固定导航栏（example here）的网站，并注意到，在iPhone上使用Chrome时，导航栏在快速滚动时会从屏幕顶部分离几个像素。这在以下屏幕截图中显示，来自bootstrap navbar示例页面：

Fixed navbar separation

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

有没有其他人遇到过这个问题，是否有任何已知的修复程序？

html css iphone google-chrome
4个回答
2
投票

我用一种棘手的方法来弥补这个差距， 我设置padding-top：100px到nav，然后margin-top：-100px， 所以当它再次发生时，间隙将由填充顶部填充。

它到目前为止工作正常，希望这也可以帮助你。

1
投票

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

无法相信。

0
投票

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

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

大约一周前遇到了同样的问题。我正在使用Bootstrap并在iPhone上的谷歌浏览器中发现了这个问题。尝试将<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;
}

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.