In iOS16 kann der Z-Index auf dem Safari iPhone nicht wirksam werden
P粉346326040
2023-08-25 20:33:05
<p>Ich habe eine Navigationsleiste, die im mobilen Modus, z. B. auf dem iPhone in Safari, diese Klasse <code>navbar-mobile</code> auf das Navigationselement anwendet. </p>
<p>Aber irgendwie wird die Navigationsleiste oben nicht angezeigt. </p>
<pre class="brush:php;toolbar:false;">.navbar-mobile {
Position: fest;
oben: 0;
rechts: 0;
links: 0;
unten: 0;
Hintergrund: rgba(0, 0, 0, 0,9);
Übergang: 0,3s;
-webkit-transform: Translate3d(0,0,0);
Z-Index: 999 !important;
-webkit-overflow-scrolling: auto !important;
Rand oben: 0;
}</pre>
<p>Dies geschieht in allen Abschnitten. Diese Teile befinden sich im Inneren des Körpers, wobei die Tsparticles-Komponente wie unten gezeigt angewendet wird. </p>
<pre class="brush:php;toolbar:false;">section {
Übergang: Easy-in-out 0,3 s;
Position: relativ;
Höhe: 100 Vh;
Anzeige: Flex;
align-items: center;
Z-Index: 997;
Überlauf-y: auto;
}
<body id="tsparticles"></body>
Körper {
Schriftfamilie: „Open Sans“, serifenlos;
Hintergrundfarbe: #040404;
Farbe: #fff;
Position: relativ;
Hintergrund: transparent;
Z-Index: -1;
-ms-overflow-style: none; /* IE und Edge */
scrollbar-width: none; /* Firefox */
Breite: 100 vw;
Höhe: 100 VH;
}
/* ---- tsparticles Container ---- */
#tsparticles {
Breite: 100 %;
Höhe: 100 %;
Z-Index: -1;
}</pre>
<p>Ich habe versucht, <code>-webkit-transform: Translate3d(0,0,0);</code> zu verwenden, aber leider kann ich das Problem nicht lösen. Dies funktioniert in anderen Browsern, das einzige Problem besteht mit Safari auf dem iPhone. </p>
我们在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) }