iOS16中，Safari iPhone上的Z-index无法生效
<p>我有一个导航栏，在移动模式下，例如在Safari浏览器上的iPhone上，将这个类<code>navbar-mobile</code>应用到具有javascript的nav元素上。</p>
<p>但不知何故，导航栏不会显示在顶部。</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>这在所有部分都发生。这些部分位于应用了tsparticles组件的body内，如下所示。</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>我已经尝试使用<code>-webkit-transform: translate3d(0,0,0);</code>，但不幸的是，我无法解决这个问题。这在其他浏览器中可以工作，唯一的问题就是在iPhone上的Safari浏览器。</p>
