背景のスライドショーのサファリ

Question

私はホームページ用のスライドショーを作成しましたが、クロームでうまくいきましたが、何らかの理由でサファリのグラデーションの背景が表示されますが、画像は表示されません。

#hero-image{ 
    background-size:cover; 
    -webkit-background-size: cover; 
    background-repeat: no-repeat; 
    -moz-animation: slide 15s infinite; 
    -o-animation: slide 15s infinite; 
    animation: slide 15s infinite; 
    -webkit-animation: slide 15s infinite; /* Safari 4.0 - 8.0 */ 

    #front-search-box{ 
     color:white; 
     position:absolute; 
     background-color:transparent; 
    } 
} 



@-webkit-keyframes slide { 
    0% { 

     background: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground2.png"); 
    } 

    50%{ 
     background: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground3.png"); 
    } 

    100%{ 
     background: -webkit-linear-gradient(top,rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground4.png"); 
    } 
} 

@-moz-keyframes slide{ 
    0% { 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground2.png"); 
    } 

    50%{ 
    background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground3.png"); 
    } 

    100%{ 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground4.png"); 
    } 
} 

@-o-keyframes slide{ 
    0% { 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground2.png"); 
    } 

    50%{ 
    background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground3.png"); 
    } 

    100%{ 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground4.png"); 
    } 
} 

@keyframes slide{ 
    0% { 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground2.png"); 
    } 

    50%{ 
    background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground3.png"); 
    } 

    100%{ 
     background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,0.3)), url("BlackBackground4.png"); 
    } 
} 

Answer 1

Safariはキーフレームアニメーションでそれをアニメーション化することができるようにするために、デフォルトbackground-imageプロパティセットを持っている必要があります。しかし、このブラウザは実際にはイメージ状態（シュリンク+不透明遷移）の間でアニメートすることに注意してください。

また、あなたの質問に貼り付けられたコードがCSSの場合は、#front-search-boxのように宣言をネストするのは構文的に間違っていることに注意してください。

最後に、アニメーション内でbackgroundプロパティを設定すると、以前に設定したより正確なルール（たとえば）がすべてリセットされることに注意してください。ここでは画像を変更するだけなので、background-imageプロパティを使用してください。

古くなったベンダーがすべて接頭辞を付けずに更新された例。

#hero-image { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background-size: cover; 
 
    -webkit-background-size: cover; 
 
    background-repeat: no-repeat; 
 
    animation: slide 15s infinite; 
 
    /* we need to set the default here for safari */ 
 
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)), url("aaa.png"); 
 
} 
 

 
@keyframes slide { 
 
    0% { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)), url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/55/John_William_Waterhouse_A_Mermaid.jpg/800px-John_William_Waterhouse_A_Mermaid.jpg"); 
 
    } 
 
    50% { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)), url("https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png"); 
 
    } 
 
    100% { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.3)), url("https://upload.wikimedia.org/wikipedia/commons/d/dd/Heptagon_pavilion%2C_HK_%26_Kln_Fuk_Tak_Buddhist_Association.JPG"); 
 
    } 
 
}

<div id="hero-image"></div>