I have a navbar that in mobile mode, e.g. on iPhone in Safari, applies this class navbar-mobile to the nav element with javascript.
But somehow the navigation bar doesn't show up at the top.
.navbar-mobile { position: fixed; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); transition: 0.3s; -webkit-transform: translate3d(0,0,0); z-index: 999 !important; -webkit-overflow-scrolling: auto !important; margin-top: 0; } This happens in all sections. These parts are located inside the body with the tsparticles component applied as shown below.
section { transition: ease-in-out 0.3s; position: relative; height: 100vh; display: flex; align-items: center; z-index: 997; overflow-y: auto; } body { font-family: "Open Sans", sans-serif; background-color: #040404; color: #fff; position: relative; background: transparent; z-index: -1; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ width:100vw; height:100vh; } /* ---- tsparticles container ---- */ #tsparticles { width: 100%; height: 100%; z-index: -1; } I've tried using -webkit-transform: translate3d(0,0,0); but unfortunately I can't solve the problem. This works in other browsers, the only problem is with Safari on iPhone.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
We are experiencing similar issues on all browsers for IOS 16. Try setting the value of z-index between 0-9. This solved the problem for us.
.navbar-mobile { position: fixed; top: 0; . . z-index: 9; } section { transition: ease-in-out 0.3s; position: relative; . . z-index: 5; } body { font-family: "Open Sans", sans-serif; background-color: #040404; color: #fff; . . z-index: -1; //(或者尝试1) }