Safari 브라우저에서 웹사이트에 비정상적인 그림자 현상이 나타납니다
<p>웹사이트를 구축했는데 Safari에서 메뉴가 이상하게 작동합니다. 문제를 보여주는 아래 비디오를 확인하십시오. 이 문제는 Safari 브라우저에서만 발생하며 다른 브라우저에서는 문제가 없습니다.</p>
<p>Safari의 문제에 대한 동영상은 https://vimeo.com/757367403</p>에서 볼 수 있습니다.
<p>이것은 내 CSS입니다. 이 문제를 해결할 수 있는 방법을 아는 사람이 있나요?</p>
<pre class="brush:php;toolbar:false;">@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
.elementor-nav-menu {
항목 정렬: 중앙;
}
.elementor-nav-menu * {
글꼴 모음: "Lato", 산세리프 !중요;
}
html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4) a {
글꼴 크기:16px!중요;
패딩: 15px 0px!중요;
}
.elementor-nav-menu > li:첫 번째 자식 {
배경색: #00aeef;
줌: 0.85;
}
.elementor-nav-menu > li:n번째-자식(2n) {
배경색: #ef6500!중요;
너비:170px!중요;
높이:170px!중요;
확대/축소:0.9!중요;
}
.elementor-nav-menu > 리 아 {
플렉스 성장: 0!중요;
}
.elementor-nav-menu > li:n번째-자식(7n) {
배경색: #e8b736!중요;
확대/축소:0.85;
}
.elementor-nav-menu > li:nth-child(3) {
배경색: #e8b736!중요;
너비:220px;
높이:220px;
패딩:0 10px!중요;
}
.elementor-nav-menu > li:n번째-자식(4n) {
배경색: #66cc9a!중요;
확대/축소:0.85;
}
html[lang="kl-kl"] .elementor-nav-menu > li:n번째-자식(4n) {
배경색: #66cc9a!중요;
확대/축소:1.05!중요;
패딩:0 0px!중요;
}
.elementor-nav-menu > li:nth-child(4) {
여백:0 자동;
}
.elementor-nav-menu > li:n번째-자식(5n){
배경색: #00aeef;
줌:1.1;
}
.elementor-nav-menu > li:n번째-자식(6) {
너비:180px!중요;
높이:180px!중요;
}
.elementor-nav-menu > li:nth-child(5) {
너비:170px!중요;
높이:170px!중요;
}
.elementor-nav-menu > 리 {
-moz-국경-반경: 70px;
-웹킷-국경-반경: 70px;
테두리 반경: 50%;
배경 크기: 표지;
배경 반복: 없음;
너비:139px;
높이:139px;
텍스트 정렬:가운데;
여백:0 10px!중요;
디스플레이: 플렉스; /* 또는 인라인 플렉스 */
항목 정렬: 중앙;
내용 정당화: 센터;
필터: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.75));
}
.elementor-nav-menu > 리 아 {
색상:#fff!중요;
글꼴 크기: 18px!중요;
word-wrap: break-word!important;
단어 중단: 중단 단어!중요;
공백: 일반!중요;
줄 높이:26px;
텍스트 정렬:가운데;
}
.elementor-nav-menu > 리 a:hover {
줄 높이:30px;
}
.elementor-nav-menu li a .sub-arrow {
표시:없음;
}
.elementor-nav-menu > .sub-menu:nth-child(3) {
배경색:빨간색;
}
.elementor-nav-menu--드롭다운 li a {
내용 정당화: 센터;
}
.elementor-nav-menu--dropdown {
-웹킷-국경-반경: 15px;
-moz-국경-반경: 15px;
테두리 반경: 15px;
변경 예정: 필터;
}.elementor-nav-menu > li:nth-child(2) ul {
너비: 300px!중요;
여백 상단: 55px!중요;
배경색: #ef6500!중요;
}
.elementor-nav-menu > li:nth-child(3) ul {
너비: 300px!중요;
배경색: #e8b736!중요;
여백 상단: 13px!중요;
}
.elementor-nav-menu > li:nth-child(4) ul {
너비: 300px!중요;
여백 상단: 55px!중요;
배경색: #66cc9a!중요;
}
.elementor-nav-menu > li:nth-child(4) ul {
너비: 300px!중요;
여백 상단: 50px!중요;
}
.elementor-nav-menu > li:nth-child(5) ul {
너비: 300px!중요;
여백 상단: 25px!중요;
}
.elementor-sub-item:hover,
.elementor-sub-item.elementor-item-active {
배경색: 투명!중요;
텍스트 장식: 밑줄!중요;
}</pre></p>