예를 들어 iPhone의 Safari와 같은 모바일 모드에서 이 클래스 navbar-mobile를 javascript를 사용하여 탐색 요소에 적용하는 navbar가 있습니다.

그런데 네비게이션 바가 상단에 표시되지 않습니다.

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

이는 모든 섹션에서 발생합니다. 이 부분들은 아래와 같이 tsparticles 컴포넌트가 적용된 몸체 내부에 위치합니다.

섹션 { 전환: easy-in-out 0.3초; 위치: 상대; 높이: 100vh; 디스플레이: 플렉스; 항목 정렬: 중앙; Z-색인: 997; 오버플로-y: 자동; }  몸 { 글꼴 모음: "Open Sans", sans-serif; 배경색: #040404; 색상: #fff; 위치: 상대; 배경: 투명; Z-색인: -1; -ms-overflow-style: 없음 /* IE 및 Edge */ 스크롤바 너비: 없음 /* Firefox */ 폭:100vw; 높이:100vh; } /* ---- tsparticles 컨테이너 ---- */ #ts입자 { 너비: 100%; 높이: 100%; Z-색인: -1; }

-webkit-transform:translate3d(0,0,0);를 사용해 보았으나 안타깝게도 문제를 해결할 수 없습니다. 이것은 다른 브라우저에서도 작동하지만 유일한 문제는 iPhone의 Safari에서만 발생합니다.