Codepen：https://codepen.io/Bobby__K/pen/eYZXQKo
我制作了一个导航栏，包含给定position: fixed的nav。
.main-nav {
position: fixed;
z-index: 10;
left: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color: white;
width: 100%;
}
当我在Chrome、Firefox和Firefox手机上运行此功能时，它可以按预期工作；即导航条不移动并且保持在顶部。然而，当我在谷歌Chrome手机上运行它并向下滚动时，导航栏会向上一点，然后固定定位似乎开始生效。这里的问题是，这会切断我导航栏的10%。
由于这种情况只有在我预览谷歌Chrome的移动视图时才会发生，我想知道这是否只是开发者工具中显示的一个视觉错误，而不是网站上线后会发生的事情。
注意：
我使用输入法和CSS
:checked使其具有响应能力。因此，我通常将复选框保留在overflow-x隐藏的一侧。我在屏幕上有复选框的情况下测试了这个项目，但同样的问题也发生了，所以这不是问题所在。我还在Opera移动视图和Brave移动视图上测试了这一点，滚动问题也发生在那里；也许这与我的代码对Chrome引擎的反应有关？
我已经将其缩小到与
@media屏幕和查询的奇怪交互。每当我做出改变，它就会解决问题。然而，一旦我关闭开发人员工具并重新打开它，滚动问题就会再次出现。
您是否碰巧有一个代码笔或具有完整html和css(以及js，如果适用(的东西。我想知道是不是主导航之外有一种冲突的风格导致了这种情况。