Fenomena bayangan yang tidak normal muncul di tapak web dalam penyemak imbas Safari

Question

Saya membina tapak web, tetapi menu berkelakuan pelik di Safari. Lihat video di bawah di mana saya menunjukkan masalahnya. Masalahnya hanya berlaku dalam pelayar Safari, pelayar lain baik-baik saja.

Video tentang masalah dalam Safari boleh dilihat di sini https://vimeo.com/757367403

Ini CSS saya, adakah sesiapa tahu beberapa helah untuk membetulkannya?

@import url('https://fonts.googleapis.com/css?family=Lato:400,700');

.elementor-nav-menu {
    align-item: tengah;
}

.elementor-nav-menu * {
    font-family: "Lato", sans-serif !important; 
    
}

html[lang="kl-kl"] .elementor-nav-menu > li:anak-anak(4) a {
    saiz fon:16px!penting;
    padding: 15px 0px!penting;
}

.elementor-nav-menu > li:anak pertama {
    warna latar belakang: #00aeef;
    zum: 0.85;
}

.elementor-nav-menu > li:anak-ke-2(2n) {
    warna latar belakang: #ef6500!penting;
    lebar:170px!penting;
    ketinggian:170px!penting;
    zum:0.9!penting;
}

.elementor-nav-menu > li a {
    flex-grow: 0!penting;
}

.elementor-nav-menu > li:anak-ke-1(7n) {
    warna latar belakang: #e8b736!penting;
    zum:0.85;
}
.elementor-nav-menu > li:anak-ke-1(3) {
    warna latar belakang: #e8b736!penting;
    lebar: 220px;
    ketinggian:220px;
    padding:0 10px!penting;
}

.elementor-nav-menu > li:anak-ke-1(4n) {
    warna latar belakang: #66cc9a!penting;
    zum:0.85;
}
html[lang="kl-kl"] .elementor-nav-menu > li:anak-ke-1(4n) {
    warna latar belakang: #66cc9a!penting;
    zum:1.05!penting;
    padding:0 0px!penting;

    
}

.elementor-nav-menu > li:anak-anak(4) {
        margin:0 auto;
}

.elementor-nav-menu > li:anak-ke-(5n){
    warna latar belakang: #00aeef;
    zum:1.1;
}

.elementor-nav-menu > li:anak ke-nth(6) {
    lebar:180px!penting;
    ketinggian:180px!penting;
}
.elementor-nav-menu > li:anak-anak(5) {
    lebar:170px!penting;
    ketinggian:170px!penting;
}

.elementor-nav-menu > li {
        -jejari-sempadan-moz: 70px; 
   -webkit-border-radius: 70px; 
    jejari sempadan: 50%;
        saiz latar belakang: penutup;
        background-repeat: tiada;
      lebar:139px;
        ketinggian:139px;
        text-align:center;
        margin:0 10px!penting;
    
      paparan: flex; /* atau inline-flex */
    align-item: tengah; 
    justify-content: pusat;
    
      penapis: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.75));
}

.elementor-nav-menu > li a {
    warna:#fff!penting;
    saiz fon: 18px!penting;
    bungkus-kata: patah-kata!penting;
    patah-patah: patah-kata!penting;
    ruang putih: normal!penting;
    ketinggian baris: 26px;
    text-align:center;
}
.elementor-nav-menu > li a:hover {
    ketinggian garis: 30px;
}

.elementor-nav-menu li a .sub-arrow {
    paparan:tiada;
}

.elementor-nav-menu > .sub-menu:nth-child(3) {
    warna latar belakang:merah;
}

.elementor-nav-menu--dropdown li a {
    justify-content: pusat;
}

.elementor-nav-menu--dropdown {
    -webkit-border-radius: 15px;
  -jejari-sempadan-moz: 15px;
  jejari sempadan: 15px;
    perubahan kehendak: penapis;
}.elementor-nav-menu > li:anak-anak(2) ul {
    lebar: 300px!penting;
    margin-top: 55px!penting;
    warna latar belakang: #ef6500!penting;
}

.elementor-nav-menu > li:anak-anak(3) ul {
    lebar: 300px!penting;
    warna latar belakang: #e8b736!penting;
    margin-top: 13px!penting;
}

.elementor-nav-menu > li:anak-anak(4) ul {
    lebar: 300px!penting;
    margin-top: 55px!penting;
    warna latar belakang: #66cc9a!penting;
}

.elementor-nav-menu > li:anak-anak(4) ul {
    lebar: 300px!penting;
    margin-top: 50px!penting;
}

.elementor-nav-menu > li:anak-anak(5) ul {
    lebar: 300px!penting;
    margin-top: 25px!penting;
}

.elementor-sub-item:hover,
.elementor-sub-item.elementor-item-active {
    warna latar belakang: lutsinar!penting;
    text-decoration: garis bawah!penting;
}

Answer 1

Cuba tambah

-webkit-appearance: none;