Dalam iOS16, Z-index pada Safari iPhone tidak boleh berkuat kuasa

Question

Saya mempunyai bar navigasi yang dalam mod mudah alih, cth. pada iPhone dalam Safari, menggunakan kelas ini navbar-mobile

Tetapi entah bagaimana bar navigasi tidak muncul di bahagian atas.

.navbar-mobile {
  kedudukan: tetap;
  atas: 0;
  kanan: 0;
  kiri: 0;
  bawah: 0;
  latar belakang: rgba(0, 0, 0, 0.9);
  peralihan: 0.3s;
  -webkit-transform: translate3d(0,0,0);
  indeks-z: 999 !penting;
  -webkit-overflow-scrolling: auto !important;
  jidar atas: 0;
}

Ini berlaku dalam semua bahagian. Bahagian-bahagian ini terletak di dalam badan dengan komponen tspartikel digunakan seperti yang ditunjukkan di bawah.

bahagian {
  peralihan: mudah-masuk-keluar 0.3s;
  kedudukan: relatif;
  ketinggian: 100vh;
  paparan: flex;
  align-item: tengah;
  indeks z: 997;
  limpahan-y: auto;
}

<id badan="tszarah"></badan>

badan {
  font-family: "Open Sans", sans-serif;
  warna latar belakang: #040404;
  warna: #fff;
  kedudukan: relatif;
  latar belakang: telus;
  indeks-z: -1;
  -ms-overflow-style: tiada /* IE dan Edge */
  lebar bar skrol: tiada; /* Firefox */
  lebar: 100vw;
  ketinggian: 100vh;
}

/* ---- tsbekas zarah ---- */
#tspartikel {
  lebar: 100%;
  ketinggian: 100%;
  indeks-z: -1;
}

Saya telah mencuba menggunakan -webkit-transform: translate3d(0,0,0); tetapi malangnya saya tidak dapat menyelesaikan masalah. Ini berfungsi dalam penyemak imbas lain, satu-satunya masalah ialah dengan Safari pada iPhone.

Answer 1

Kami mengalami isu yang sama pada semua penyemak imbas untuk IOS 16. Cuba tetapkan nilai indeks-z antara 0-9. Ini menyelesaikan masalah untuk kami.

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