iOS16에서는 Safari iPhone의 Z-index가 적용될 수 없습니다.
P粉346326040
2023-08-25 20:33:05
<p>예를 들어 iPhone의 Safari와 같은 모바일 모드에서 이 클래스 <code>navbar-mobile</code>를 javascript를 사용하여 탐색 요소에 적용하는 navbar가 있습니다. </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: 번역3d(0,0,0);
Z-색인: 999 !중요;
-webkit-overflow-scrolling: 자동!중요;
여백 상단: 0;
}</pre>
<p>이는 모든 섹션에서 발생합니다. 이 부분들은 아래와 같이 tsparticles 컴포넌트가 적용된 몸체 내부에 위치합니다. </p>
<pre class="brush:php;toolbar:false;">섹션 {
전환: easy-in-out 0.3초;
위치: 상대;
높이: 100vh;
디스플레이: 플렉스;
항목 정렬: 중앙;
Z-색인: 997;
오버플로-y: 자동;
}
<body id="tsparticles"></body>
몸 {
글꼴 모음: "Open Sans", sans-serif;
배경색: #040404;
색상: #fff;
위치: 상대;
배경: 투명;
Z-색인: -1;
-ms-overflow-style: 없음 /* IE 및 Edge */
스크롤바 너비: 없음 /* Firefox */
폭:100vw;
높이:100vh;
}
/* ---- tsparticles 컨테이너 ---- */
#ts입자 {
너비: 100%;
높이: 100%;
Z-색인: -1;
}</pre>
<p><code>-webkit-transform:translate3d(0,0,0);</code>를 사용해 보았으나 안타깝게도 문제를 해결할 수 없습니다. 이것은 다른 브라우저에서도 작동하지만 유일한 문제는 iPhone의 Safari에서만 발생합니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
IOS 16의 모든 브라우저에서 비슷한 문제가 발생하고 있습니다. Z-색인 값을 0-9 사이로 설정해 보세요. 이것은 우리의 문제를 해결했습니다.
으아악