Sous iOS16, le Z-index sur Safari iPhone ne prend pas effet
P粉346326040
2023-08-25 20:33:05
<p>J'ai une barre de navigation qui, en mode mobile, par exemple sur iPhone dans Safari, applique cette classe <code>navbar-mobile</code> </p>
<p>Mais d'une manière ou d'une autre, la barre de navigation n'apparaît pas en haut. </p>
<pre class="brush:php;toolbar:false;">.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 ;
}</pré>
<p>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. </p>
<pre class="brush:php;toolbar:false;">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 ;
}
<body id="tparticules"></body>
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 ;
}</pré>
<p>J'ai essayé d'utiliser <code>-webkit-transform:translate3d(0,0,0);</code> 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. </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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) }