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