In iOS16, Z-index on Safari iPhone cannot take effect
P粉346326040
2023-08-25 20:33:05
<p>I have a navbar that in mobile mode, e.g. on iPhone in Safari, applies this class <code>navbar-mobile</code> to the nav element with javascript. </p>
<p>But somehow the navigation bar doesn't show up at the top. </p>
<pre class="brush:php;toolbar:false;">.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;
}</pre>
<p>This happens in all sections. These parts are located inside the body with the tsparticles component applied as shown below. </p>
<pre class="brush:php;toolbar:false;">section {
transition: ease-in-out 0.3s;
position: relative;
height: 100vh;
display: flex;
align-items: center;
z-index: 997;
overflow-y: auto;
}
<body id="tsparticles"></body>
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;
}</pre>
<p>I've tried using <code>-webkit-transform: translate3d(0,0,0);</code> but unfortunately I can't solve the problem. This works in other browsers, the only problem is with Safari on iPhone. </p>
![[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) }