修复了在 Firefox 上工作的导航栏，但在 Chrome 上不工作

Question

Codepen：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 使它具有响应性。因此，我通常将复选框保留在隐藏溢出-x 的一侧。我在屏幕上有复选框的同时测试了该项目，但发生了同样的问题，所以这不是问题。

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

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

Answer 1

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