iOS16中，Safari iPhone上的Z-index无法生效
P粉346326040
2023-08-25 20:33:05
<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>
我们在IOS 16的所有浏览器上遇到了类似的问题。尝试将z-index的值设置在0-9之间。这对我们解决了问题。
.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) }