Un phénomène d'ombre anormal apparaît sur les sites Web dans le navigateur Safari

Question

J'ai créé un site Web, mais le menu se comporte étrangement sur Safari. Regardez la vidéo ci-dessous où je démontre le problème. Le problème ne se produit que dans le navigateur Safari, les autres navigateurs conviennent.

Une vidéo du problème dans Safari peut être visionnée ici https://vimeo.com/757367403

Voici mon CSS, est-ce que quelqu'un connaît des astuces pour résoudre ce problème ?

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

.elementor-nav-menu {
    aligner les éléments : centre ;
}

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

html[lang="kl-kl"] .elementor-nav-menu > li:ntième-enfant(4) a {
    taille de police : 16 px ! important ;
    remplissage : 15px 0px!important ;
}

.elementor-nav-menu > li:premier-enfant {
    couleur d'arrière-plan : #00aeef ;
    zoom : 0,85 ;
}

.elementor-nav-menu > li:ntième-enfant(2n) {
    couleur d'arrière-plan : #ef6500!important ;
    largeur:170px!important;
    hauteur:170px!important;
    zoom:0,9!important;
}

.elementor-nav-menu > li un {
    flex-grow : 0 ! important ;
}

.elementor-nav-menu > li:ntième-enfant(7n) {
    couleur d'arrière-plan : #e8b736!important ;
    zoom:0,85 ;
}
.elementor-nav-menu > li:ntième-enfant(3) {
    couleur d'arrière-plan : #e8b736!important ;
    largeur : 220 px ;
    hauteur : 220 px ;
    remplissage:0 10px!important;
}

.elementor-nav-menu > li:ntième-enfant(4n) {
    couleur d'arrière-plan : #66cc9a!important ;
    zoom:0,85 ;
}
html[lang="kl-kl"] .elementor-nav-menu > li:ntième-enfant(4n) {
    couleur d'arrière-plan : #66cc9a!important ;
    zoom:1.05!important;
    remplissage:0 0px!important;

    
}

.elementor-nav-menu > li:ntième-enfant(4) {
        marge : 0 automatique ;
}

.elementor-nav-menu > li:ntième-enfant(5n){
    couleur d'arrière-plan : #00aeef ;
    zoom:1.1 ;
}

.elementor-nav-menu > li:ntième-enfant(6) {
    largeur:180px!important;
    hauteur:180px!important;
}
.elementor-nav-menu > li:ntième-enfant(5) {
    largeur:170px!important;
    hauteur:170px!important;
}

.elementor-nav-menu > li {
        -moz-border-radius : 70px ; 
   -radius de bordure de kit Web : 70 px ; 
    rayon de bordure : 50 % ;
        taille de l'arrière-plan : couverture ;
        répétition d'arrière-plan : aucune ;
      largeur : 139 px ;
        hauteur : 139px ;
        texte-align:centre;
        marge:0 10px!important;
    
      affichage : flexible ; /* ou inline-flex */
    aligner les éléments : centre ; 
    justifier-contenu : centre ;
    
      filtre : ombre portée (0px 0px 15px rgba (0, 0, 0, 0,75));
}

.elementor-nav-menu > li un {
    couleur:#fff!important;
    taille de police : 18px !important ;
    retour à la ligne : break-word!important;
    coupure de mot : coupure de mot ! important ;
    espace blanc : normal ! important ;
    hauteur de ligne : 26 px ;
    texte-align:centre;
}
.elementor-nav-menu > li a: survolez {
    hauteur de ligne : 30 px ;
}

.elementor-nav-menu li a .sub-arrow {
    affichage : aucun ;
}

.elementor-nav-menu > .sub-menu:ntième-enfant(3) {
    couleur d'arrière-plan : rouge ;
}

.elementor-nav-menu--dropdown li a {
    justifier-contenu : centre ;
}

.elementor-nav-menu--dropdown {
    -webkit-border-radius : 15px ;
  -moz-border-radius : 15px ;
  rayon de bordure : 15 px ;
    changera : filtre ;
}.elementor-nav-menu > li:ntième-enfant(2) ul {
    largeur : 300px !important ;
    marge supérieure : 55 px ! important ;
    couleur d'arrière-plan : #ef6500!important ;
}

.elementor-nav-menu > li:ntième-enfant(3) ul {
    largeur : 300px !important ;
    couleur d'arrière-plan : #e8b736!important ;
    marge supérieure : 13 px !important ;
}

.elementor-nav-menu > li:ntième-enfant(4) ul {
    largeur : 300px !important ;
    marge supérieure : 55 px ! important ;
    couleur d'arrière-plan : #66cc9a!important ;
}

.elementor-nav-menu > li:ntième-enfant(4) ul {
    largeur : 300px !important ;
    marge supérieure : 50 px ! important ;
}

.elementor-nav-menu > li:ntième-enfant(5) ul {
    largeur : 300px !important ;
    marge supérieure : 25 px !important ;
}

.elementor-sub-item: survol,
.elementor-sub-item.elementor-item-active {
    couleur d'arrière-plan : transparent ! important ;
    décoration de texte : souligner ! important ;
}

Answer 1

Essayez d'ajouter

-webkit-appearance: none;