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