Auf Websites im Safari-Browser tritt ein ungewöhnliches Schattenphänomen auf

Question

Ich habe eine Website erstellt, aber das Menü verhält sich in Safari seltsam. Schauen Sie sich das Video unten an, in dem ich das Problem demonstriere. Das Problem tritt nur im Safari-Browser auf, andere Browser sind in Ordnung.

Ein Video des Problems in Safari kann hier angesehen werden: https://vimeo.com/757367403

Das ist mein CSS. Kennt jemand ein paar Tricks, um das zu beheben?

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

.elementor-nav-menu {
    align-items: center;
}

.elementor-nav-menu * {
    Schriftfamilie: „Lato“, serifenlos !important; 
    
}

html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4) a {
    Schriftgröße:16px!important;
    Polsterung: 15px 0px!wichtig;
}

.elementor-nav-menu > li:first-child {
    Hintergrundfarbe: #00aeef;
    Zoom: 0,85;
}

.elementor-nav-menu > li:nth-child(2n) {
    Hintergrundfarbe: #ef6500!important;
    Breite:170px!wichtig;
    Höhe:170px!wichtig;
    Zoom:0,9!wichtig;
}

.elementor-nav-menu > li a {
    Flex-Grow: 0!important;
}

.elementor-nav-menu > li:nth-child(7n) {
    Hintergrundfarbe: #e8b736!important;
    Zoom: 0,85;
}
.elementor-nav-menu > li:nth-child(3) {
    Hintergrundfarbe: #e8b736!important;
    Breite:220px;
    Höhe:220px;
    padding:0 10px!important;
}

.elementor-nav-menu > li:nth-child(4n) {
    Hintergrundfarbe: #66cc9a!important;
    Zoom: 0,85;
}
html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4n) {
    Hintergrundfarbe: #66cc9a!important;
    Zoom:1,05!wichtig;
    padding:0 0px!important;

    
}

.elementor-nav-menu > li:nth-child(4) {
        Rand:0 automatisch;
}

.elementor-nav-menu > li:nth-child(5n){
    Hintergrundfarbe: #00aeef;
    Zoom: 1,1;
}

.elementor-nav-menu > li:nth-child(6) {
    Breite:180px!wichtig;
    Höhe:180px!wichtig;
}
.elementor-nav-menu > li:nth-child(5) {
    Breite:170px!wichtig;
    Höhe:170px!wichtig;
}

.elementor-nav-menu > li {
        -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
    Randradius: 50 %;
        Hintergrundgröße: Cover;
        Hintergrundwiederholung: keine;
      Breite:139px;
        Höhe:139px;
        text-align:center;
        margin:0 10px!important;
    
      Anzeige: Flex; /* oder inline-flex */
    align-items: center; 
    rechtfertigen-Inhalt: Mitte;
    
      Filter: Schlagschatten (0px 0px 15px rgba(0, 0, 0, 0,75));
}

.elementor-nav-menu > li a {
    Farbe:#fff!wichtig;
    Schriftgröße: 18px!wichtig;
    Zeilenumbruch: Wortumbruch!wichtig;
    Wortumbruch: Wortumbruch!wichtig;
    Leerraum: normal!wichtig;
    Zeilenhöhe:26px;
    text-align:center;
}
.elementor-nav-menu > li a:hover {
    Zeilenhöhe:30px;
}

.elementor-nav-menu li a .sub-arrow {
    Anzeige:keine;
}

.elementor-nav-menu > .sub-menu:nth-child(3) {
    Hintergrundfarbe:rot;
}

.elementor-nav-menu--dropdown li a {
    rechtfertigen-Inhalt: Mitte;
}

.elementor-nav-menu--dropdown {
    -webkit-Grenzradius: 15px;
  -moz-border-radius: 15px;
  Randradius: 15px;
    will-change: filter;
}.elementor-nav-menu > li:nth-child(2) ul {
    Breite: 300px!wichtig;
    margin-top: 55px!important;
    Hintergrundfarbe: #ef6500!important;
}

.elementor-nav-menu > li:nth-child(3) ul {
    Breite: 300px!wichtig;
    Hintergrundfarbe: #e8b736!important;
    margin-top: 13px!important;
}

.elementor-nav-menu > li:nth-child(4) ul {
    Breite: 300px!wichtig;
    margin-top: 55px!important;
    Hintergrundfarbe: #66cc9a!important;
}

.elementor-nav-menu > li:nth-child(4) ul {
    Breite: 300px!wichtig;
    margin-top: 50px!important;
}

.elementor-nav-menu > li:nth-child(5) ul {
    Breite: 300px!wichtig;
    margin-top: 25px!important;
}

.elementor-sub-item:hover,
.elementor-sub-item.elementor-item-active {
    Hintergrundfarbe: transparent!wichtig;
    Textdekoration: unterstrichen!wichtig;
}

Answer 1

尝试添加

-webkit-appearance: none;