CSSアニメーションは、私はSafariを使用したときに最後にジャンプCSSのトランジション効果を伴う問題を持っているのSafari

Question

の終わりにジャンプします。画像上でホバリングするとき

アニメーションが発生します。 Chrome、Firefox、Operaなどの場合は、アニメーションがスムーズです。しかしSafariでは、アニメーションが最後に少しポップ/ジャンプします。それは非常に微妙ですので、私はこの問題に言及し、オンラインで何かを見つけることができませんhere

このURLでそれを見るためにテキストに目を離しません。私は以下のCSSを提供しました。誰がなぜこれが起こるのか知っていますか？

.img-box { 
 
    width: 100%; 
 
    height: 100%; 
 
    float: left; 
 
    overflow: hidden; 
 
    position: relative; 
 
    text-align: center; 
 
    cursor: default; 
 
} 
 

 
.img-box .overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background:rgba(0, 0, 0, 0.2); 
 
    opacity:0; 
 
    top: 0; 
 
    left: 0; 
 
    padding:10px; 
 
    transition-duration:1.5s; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 
.img-box .overlayDark { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background:rgba(0, 0, 0, 0.3); 
 
    opacity:0; 
 
    top: 0; 
 
    left: 0; 
 
    padding:10px; 
 
    transition-duration:1.5s; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 
.img-box .overlay:hover { 
 
    opacity:1; 
 
} 
 
.img-box .overlay:focus { 
 
    opacity:1; 
 
} 
 
.img-box .overlay:active { 
 
    opacity:1; 
 
} 
 
.img-box img { 
 
    display: block; 
 
    position: relative; 
 
    transition:1.5s; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 

 
.img-box:hover img { 
 
    -webkit-filter: blur(2px); 
 
    filter: blur(2px); 
 
} 
 
.img-box:focus img { 
 
    -webkit-filter: blur(10px); 
 
    filter: blur(2px); 
 
} 
 
.img-box:active img { 
 
    -webkit-filter: blur(10px); 
 
    filter: blur(2px); 
 
} 
 

 
.img-box h1 { 
 
    margin-top:100px; 
 
    text-transform: uppercase; 
 
    color: #cbcbcb; 
 
    text-align: center; 
 
    position: relative; 
 
    font-size: 25px; 
 
    overflow: hidden; 
 
    padding: 0.5em 0; 
 
    background-color: transparent; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 

 

 
.img-box a, .img-box p { 
 
    color: #cbcbcb; 
 
    padding:50px; 
 
    font-size:17px; 
 
    opacity: 0; 
 
    text-align: center; 
 
    -webkit-transition: opacity 1.5s, -webkit-transform 1.5s; 
 
    transition: opacity 1.5s, transform 1.5s; 
 
    transition: opacity 1.5s, transform 1.5s; 
 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
 
} 
 
@media(max-width:1200px) { 
 
    .img-box h1 { 
 
     margin-top:0vh; 
 
    } 
 
    .img-box p { 
 
     padding:0px!important; 
 
    } 
 
} 
 

 
.img-box:hover a, .img-box:hover p { 
 
    opacity: 1; 
 
} 
 
.img-box:focus a, .img-box:focus p { 
 
    opacity: 1; 
 
} 
 
.img-box:active a, .img-box:active p { 
 
    opacity: 1; 
 
}

Answer 1

-webkit-変換を用いた：translate3d（0,0,0）。ハードウェアアクセラレーションを提供する

.img-box a, .img-box p { 
    color: #cbcbcb; 
    padding:50px; 
    font-size:17px; 
    opacity: 0; 
    text-align: center; 
    -webkit-transition: opacity 1.5s, -webkit-transform 1.5s; 
    transition: opacity 1.5s, transform 1.5s; 
    transition: opacity 1.5s, transform 1.5s; 
    transition-timing-function: cubic-bezier(.53,.32,.63,1); 
    -webkit-transition-timing-function:cubic-bezier(.53,.32,.63,1); 
    -webkit-transform: translate3d(0, 0, 0); 
}