Abnormal shadow phenomenon appears on websites in Safari browser

Question

I built a website, but the menu behaves strangely on Safari. Check out the video below where I demonstrate the problem. The problem only occurs in Safari browser, other browsers are fine.

A video of the problem in Safari can be viewed here https://vimeo.com/757367403

This is my CSS, does anyone know some tricks to fix this?

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

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

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

html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4) a {
    font-size:16px!important;
    padding: 15px 0px!important;
}

.elementor-nav-menu > li:first-child {
    background-color: #00aeef;
    zoom: 0.85;
}

.elementor-nav-menu > li:nth-child(2n) {
    background-color: #ef6500!important;
    width:170px!important;
    height:170px!important;
    zoom:0.9!important;
}

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

.elementor-nav-menu > li:nth-child(7n) {
    background-color: #e8b736!important;
    zoom:0.85;
}
.elementor-nav-menu > li:nth-child(3) {
    background-color: #e8b736!important;
    width:220px;
    height:220px;
    padding:0 10px!important;
}

.elementor-nav-menu > li:nth-child(4n) {
    background-color: #66cc9a!important;
    zoom:0.85;
}
html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4n) {
    background-color: #66cc9a!important;
    zoom:1.05!important;
    padding:0 0px!important;

    
}

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

.elementor-nav-menu > li:nth-child(5n){
    background-color: #00aeef;
    zoom:1.1;
}

.elementor-nav-menu > li:nth-child(6) {
    width:180px!important;
    height:180px!important;
}
.elementor-nav-menu > li:nth-child(5) {
    width:170px!important;
    height:170px!important;
}

.elementor-nav-menu > li {
        -moz-border-radius: 70px; 
   -webkit-border-radius: 70px; 
    border-radius: 50%;
        background-size: cover;
        background-repeat: none;
      width:139px;
        height:139px;
        text-align:center;
        margin:0 10px!important;
    
      display: flex; /* or inline-flex */
    align-items: center; 
    justify-content: center;
    
      filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.75));
}

.elementor-nav-menu > li a {
    color:#fff!important;
    font-size: 18px!important;
    word-wrap: break-word!important;
    word-break: break-word!important;
    white-space: normal!important;
    line-height:26px;
    text-align:center;
}
.elementor-nav-menu > li a:hover {
    line-height:30px;
}

.elementor-nav-menu li a .sub-arrow {
    display:none;
}

.elementor-nav-menu > .sub-menu:nth-child(3) {
    background-color:red;
}

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

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

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

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

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

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

.elementor-sub-item:hover,
.elementor-sub-item.elementor-item-active {
    background-color: transparent!important;
    text-decoration: underline!important;
}

Answer 1

Try to add

-webkit-appearance: none;