In iOS16, Z-index on Safari iPhone cannot take effect
<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>
