CSS animation jumps at the end on Safari

Question

I have an issue that involves a CSS transition effect jumping at the end when using Safari.

The animation occurs when hovering on an image. When on Chrome, Firefox, Opera etc the animation is smooth all the way through. However on Safari, the animation pops/jumps slightly at the end. It's very subtle so keep an eye on the text to see it at this URL here

I can't find anything online that mentions this issue. I've provided the CSS below. Does anyone know why this happens?

.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

Using -webkit-transform: translate3d(0,0,0); to give a hardware acceleration

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