亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

iOS16中,Safari iPhone上的Z-index無(wú)法生效
P粉346326040
P粉346326040 2023-08-25 20:33:05
0
1
766
<p>我有一個(gè)導(dǎo)航欄,在移動(dòng)模式下,例如在Safari瀏覽器上的iPhone上,將這個(gè)類(lèi)<code>navbar-mobile</code>應(yīng)用到具有javascript的nav元素上。</p> <p>但不知何故,導(dǎo)航欄不會(huì)顯示在頂部。</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>這在所有部分都發(fā)生。這些部分位于應(yīng)用了tsparticles組件的body內(nèi),如下所示。</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>我已經(jīng)嘗試使用<code>-webkit-transform: translate3d(0,0,0);</code>,但不幸的是,我無(wú)法解決這個(gè)問(wèn)題。這在其他瀏覽器中可以工作,唯一的問(wèn)題就是在iPhone上的Safari瀏覽器。</p>
P粉346326040
P粉346326040

全部回復(fù)(1)
P粉428986744

我們?cè)贗OS 16的所有瀏覽器上遇到了類(lèi)似的問(wèn)題。嘗試將z-index的值設(shè)置在0-9之間。這對(duì)我們解決了問(wèn)題。

.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)
}
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板