简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
iOS16中，Safari iPhone上的Z-index無法生效
P粉346326040
P粉346326040 2023-08-25 20:33:05
0
1
587
<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>
P粉346326040
P粉346326040

全部回覆(1)
P粉428986744
P粉4289867442023-08-26 00:35:38 1樓

我們在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)
}
點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！