导航条的行为类似于位置粘贴

Question

我试图使导航条粘在移动版本的顶部，但它的行为像position: sticky，即使我使它fixed，它在Firefox上工作得很好，但不工作在Chrome上。这是我的HTML

顺便说一下，我使用的是react，这是我的repo

<nav
className='navbar'
style={{ transition: 'ease-in-out 0.5s', backgroundColor: bgColor }}
>
<div className='navbar-wrapper'>
<div className='left'>
<img src={myLogo} alt='logo' />
<span id='name'>Suat Bayrak</span>
</div>
<div className='right'>
<i className='fas fa-bars' onClick={(e) => menuFunc(e)}></i>
<ul className={showMenu ? 'active' : ''}>
<li>
<NavLink to='/' exact activeClassName='active'>
Home
</NavLink>
</li>
<li>
<NavLink to='/about' exact activeClassName='active'>
About
</NavLink>
</li>
<li>
{' '}
<NavLink to='/portfolio' exact activeClassName='active'>
Porfolio
</NavLink>
</li>
<li>
<NavLink to='/contact' exact activeClassName='active'>
Contact
</NavLink>
</li>
</ul>
</div>
</div>
</nav>

，这是我的相关CSS;

nav {
position: fixed;
-webkit-backface-visibility: hidden;
margin: 0;
top: 0px;
left: 0px;
z-index: 199;
width: 100%;
height: auto;
}
nav .navbar-wrapper {
display: flex;
width: 90%;
height: 90px;
margin: 0 auto;
justify-content: space-around;
}
nav .navbar-wrapper .left {
display: flex;
justify-content: space-around;
align-items: center;
}
nav .navbar-wrapper .left img {
width: 15%;
height: auto;
}
nav .navbar-wrapper .left #name {
font-size: 34px;
color: #fff;
}
nav .navbar-wrapper .right i {
display: none;
color: #fff;
}
nav .navbar-wrapper .right {
width: 55%;
height: 90px;
}
nav .navbar-wrapper .right ul {
display: flex;
justify-content: space-around;
align-items: center;
height: 90px;
list-style: none;
width: 100%;
transition: ease-in-out 0.5s;
}
nav .navbar-wrapper .right ul li a {
text-decoration: none;
font-size: 20px;
color: #fff;
}    

和my media-query for it

@media (min-width: 320px) and (max-width: 767px) {
nav {
position: fixed;
top: 0px;
}
}

Answer 1

我真的不知道是什么原因导致这种情况在Chrome上，但我有一个menu-bars图标，我显示它为块，一切都很好，没有添加一行代码，但。