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) }