Safari 브라우저에서 웹사이트에 비정상적인 그림자 현상이 나타납니다

Question

웹사이트를 구축했는데 Safari에서 메뉴가 이상하게 작동합니다. 문제를 보여주는 아래 비디오를 확인하십시오. 이 문제는 Safari 브라우저에서만 발생하며 다른 브라우저에서는 문제가 없습니다.

Safari의 문제에 대한 동영상은 https://vimeo.com/757367403

에서 볼 수 있습니다.

이것은 내 CSS입니다. 이 문제를 해결할 수 있는 방법을 아는 사람이 있나요?

@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 {
    배경색: 투명!중요;
    텍스트 장식: 밑줄!중요;
}

Answer 1

추가해 보세요

으아악