Подсказка CSS в конце на Safari

Question

У меня проблема, связанная с эффектом перехода CSS, который прыгает в конце при использовании Safari.

Анимация возникает при наведении указателя мыши на изображение. Когда в Chrome, Firefox, Opera и т. Д. Анимация проходит гладко. Однако в Safari анимация выскакивает/прыгает немного в конце. Это очень тонко, поэтому следите за текстом, чтобы увидеть его по этому URL-адресу here

Я ничего не могу найти в Интернете, где упоминается об этой проблеме. Я предоставил 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); 
}