SafariブラウザのWebサイトに異常な影が表示される現象

Question

ウェブサイトを構築しましたが、Safari でメニューの動作がおかしくなります。私が問題を説明している以下のビデオをご覧ください。この問題は Safari ブラウザでのみ発生します。他のブラウザでは問題ありません。

Safari の問題のビデオは、ここでご覧いただけます https://vimeo.com/757367403

これは私の CSS ですが、これを修正するコツを知っている人はいますか?

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

.elementor-nav-menu {
    整列項目: 中央;
}

.elementor-nav-menu * {
    フォントファミリー: "Lato"、サンセリフ !重要;
    
}

html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4) a {
    フォントサイズ:16px!重要;
    パディング: 15px 0px!重要;
}

.elementor-nav-menu > li:最初の子 {
    背景色: #00aeef;
    ズーム: 0.85;
}

.elementor-nav-menu > li:nth-child(2n) {
    背景色: #ef6500!重要;
    幅:170px!重要;
    高さ:170px!重要;
    ズーム:0.9!重要;
}

.elementor-nav-menu >り、{
    flex-grow: 0!重要;
}

.elementor-nav-menu > li:nth-child(7n) {
    背景色: #e8b736!重要;
    ズーム:0.85;
}
.elementor-nav-menu > li:nth-child(3) {
    背景色: #e8b736!重要;
    幅:220ピクセル;
    高さ:220ピクセル;
    パディング:0 10px!重要;
}

.elementor-nav-menu > li:nth-child(4n) {
    背景色: #66cc9a!重要;
    ズーム:0.85;
}
html[lang="kl-kl"] .elementor-nav-menu > li:nth-child(4n) {
    背景色: #66cc9a!重要;
    ズーム:1.05!重要;
    パディング:0 0px!重要;

    
}

.elementor-nav-menu > li:nth-child(4) {
        マージン:0 自動;
}

.elementor-nav-menu > li:nth-child(5n){
    背景色: #00aeef;
    ズーム:1.1;
}

.elementor-nav-menu > li:nth-child(6) {
    幅:180px!重要;
    高さ:180px!重要;
}
.elementor-nav-menu > li:nth-child(5) {
    幅:170px!重要;
    高さ:170px!重要;
}

.elementor-nav-menu >リ {
        -moz-border-radius: 70px;
   -webkit-border-radius: 70px;
    境界半径: 50%;
        背景サイズ: カバー;
        背景リピート: なし。
      幅:139ピクセル;
        高さ:139ピクセル;
        テキスト整列:中央;
        マージン:0 10px!重要;
    
      ディスプレイ: フレックス; /* またはインラインフレックス */
    整列項目: 中央;
    コンテンツの位置揃え: 中央;
    
      フィルター: ドロップシャドウ(0px 0px 15px rgba(0, 0, 0, 0.75));
}

.elementor-nav-menu >り、{
    色:#fff!重要;
    フォントサイズ: 18px!重要;
    ワードラップ: ブレークワード!重要;
    単語区切り: 単語区切り!重要;
    ホワイトスペース: 通常!重要;
    行の高さ:26px;
    テキスト整列:中央;
}
.elementor-nav-menu > li a:ホバー{
    行の高さ:30px;
}

.elementor-nav-menu li a .sub-arrow {
    ディスプレイ:なし;
}

.elementor-nav-menu > .sub-menu:nth-child(3) {
    背景色:赤;
}

.elementor-nav-menu--dropdown li a {
    コンテンツの位置揃え: 中央;
}

.elementor-nav-menu--dropdown {
    -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  境界半径: 15px;
    will-change: フィルター;
}.elementor-nav-menu > li:nth-child(2) ul {
    幅: 300px!重要;
    マージントップ: 55px!重要;
    背景色: #ef6500!重要;
}

.elementor-nav-menu > li:nth-child(3) ul {
    幅: 300px!重要;
    背景色: #e8b736!重要;
    マージントップ: 13px!重要;
}

.elementor-nav-menu > li:nth-child(4) ul {
    幅: 300px!重要;
    マージントップ: 55px!重要;
    背景色: #66cc9a!重要;
}

.elementor-nav-menu > li:nth-child(4) ul {
    幅: 300px!重要;
    マージントップ: 50px!重要;
}

.elementor-nav-menu > li:nth-child(5) ul {
    幅: 300px!重要;
    マージントップ: 25px!重要;
}

.elementor-sub-item:ホバー、
.elementor-sub-item.elementor-item-active {
    背景色: 透明!重要;
    テキスト装飾: 下線!重要;
}

Answer 1

追加してみてください

リーリー