iOS16ではiPhoneのSafariでZ-indexが有効にならない
<p>モバイル モード (iPhone の Safari など) で、JavaScript を使用してこのクラス <code>navbar-mobile</code> を nav 要素に適用するナビゲーションバーがあります。 </p>
<p>しかし、どういうわけかナビゲーション バーが上部に表示されません。 </p>
<pre class="brush:php;toolbar:false;">.navbar-mobile {
位置: 固定;
トップ: 0;
右: 0;
左: 0;
下: 0;
背景: rgba(0, 0, 0, 0.9);
トランジション: 0.3秒;
-webkit-transform:translate3d(0,0,0);
z インデックス: 999 !重要;
-webkit-overflow-scrolling: 自動 !重要;
マージントップ: 0;
}</pre>
<p>これはすべてのセクションで発生します。これらのパーツは、以下に示すように tsparticles コンポーネントが適用されたボディの内部に配置されます。 </p>
<pre class="brush:php;toolbar:false;">セクション {
トランジション: イーズインアウト 0.3 秒。
位置: 相対的;
高さ: 100vh;
ディスプレイ: フレックス;
整列項目: 中央;
z インデックス: 997;
オーバーフロー-y: 自動;
}
<body id="tsparticles"></body>
体 {
フォントファミリー: 「Open Sans」、サンセリフ;
背景色: #040404;
色: #fff;
位置: 相対的;
背景: 透明;
z インデックス: -1;
-ms-overflow-style: none; /* IE および Edge */
スクロールバーの幅: なし; /* Firefox */
幅:100vw;
高さ:100vh;
}
/* ---- tsparticles コンテナ ---- */
#t粒子 {
幅: 100%;
高さ: 100%;
z インデックス: -1;
}</pre>
<p><code>-webkit-transform:translate3d(0,0,0);</code> を使用してみましたが、残念ながら問題を解決できません。これは他のブラウザでも機能しますが、唯一の問題は iPhone の Safari です。 </p>
