固定导航栏在 Firefox 上工作，但在 Chrome 上不工作

Question

代码笔：https://codepen.io/Bobby__K/pen/eYZXQKo

我制作了一个包含 nav 的导航栏，给定 position: fixed。

.main-nav {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  padding: 0 5%;
  height: 100px;
  background-color: white;
  width: 100%;
}

当我在 Chrome、Firefox 和 Firefox 移动版上 运行 时，它按预期工作；即导航栏不会移动并保持在顶部。然而，当我 运行 它在 Google Chrome 移动设备上向下滚动时，导航栏上升了一点，然后固定定位似乎开始了。这里的问题是这切断了我的导航栏占了 10%。

因为这只发生在我预览 Google Chrome 的移动视图时，我想知道这是否只是开发人员工具中显示的视觉错误，而不是一旦网站上线了。

备注：

• 我已经使用输入法和 CSS :checked 使其响应。因此，我通常将复选框保留在隐藏 overflow-x 的一侧。我在屏幕上显示复选框时测试了该项目，但出现了同样的问题，所以这不是问题所在。

• 我还在 Opera 移动视图和 Brave 移动视图上测试过这个，滚动问题也在那里发生；所以这可能与我的代码对 Chrome 引擎的反应有关？

• 我已经 缩小范围 以与我的 @media 屏幕和查询进行奇怪的交互。每当我进行更改时，它都会解决问题。但是，一旦我关闭开发人员工具并重新打开它，滚动问题就会再次出现。

Answer 1

你碰巧有一个 codepen 或什么东西有完整的 html 和 css（如果适用的话还有 js）。我想知道 .main-nav 之外是否存在冲突的样式导致了这种情况。