Sous iOS16, le Z-index sur Safari iPhone ne prend pas effet

Question

J'ai une barre de navigation qui, en mode mobile, par exemple sur iPhone dans Safari, applique cette classe navbar-mobile

Mais d'une manière ou d'une autre, la barre de navigation n'apparaît pas en haut.

.navbar-mobile {
  poste : fixe ;
  haut : 0 ;
  à droite : 0 ;
  gauche : 0 ;
  bas : 0 ;
  arrière-plan : rgba(0, 0, 0, 0,9) ;
  transition : 0,3 s ;
  -webkit-transform : translate3d(0,0,0);
  indice z : 999 !important ;
  -webkit-overflow-scrolling : auto !important ;
  marge supérieure : 0 ;
}
Cela se produit dans toutes les sections. Ces pièces sont situées à l'intérieur du corps avec le composant tparticules appliqué comme indiqué ci-dessous. 
section {
  transition : facilité d'entrée et de sortie 0,3 s ;
  position : relative ;
  hauteur : 100vh ;
  affichage : flexible ;
  aligner les éléments : centre ;
  indice z : 997 ;
  débordement-y : auto ;
}



corps {
  famille de polices : "Open Sans", sans-serif ;
  couleur d'arrière-plan : #040404 ;
  couleur : #fff ;
  position : relative ;
  fond : transparent ;
  indice z : -1 ;
  -ms-overflow-style : aucun ; /* IE et Edge */
  largeur de la barre de défilement : aucune ; /* Firefox */
  largeur : 100 vw ;
  hauteur : 100vh ;
}

/* ---- conteneur de particules ---- */
#particules {
  largeur : 100 % ;
  hauteur : 100 % ;
  indice z : -1 ;
}
J'ai essayé d'utiliser -webkit-transform:translate3d(0,0,0); mais malheureusement je ne parviens pas à résoudre le problème. Cela fonctionne dans d'autres navigateurs, le seul problème vient de Safari sur iPhone. 

Answer 1

Nous rencontrons des problèmes similaires sur tous les navigateurs pour IOS 16. Essayez de définir la valeur de z-index entre 0 et 9. Cela a résolu le problème pour nous.

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