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

Pitiless

3 years later and this is STILL an issue. Damnit, Safari. – Kaiak

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

Ilke

Do you mean I should add the translate 3d to fix the issue? I tried it and it hasn't changed anything on Safari – Pitiless

yes adding this fixed the problem for me, i don't see text jumping at the end now. – Ilke

Thank you for this. – Kaiak

Answer 2

Background

I had a similar issue, but it was specific to Safari on iOS. Transitions and animations on my site were choppy, jumpy, and not smooth in Safari for iOS; the ends of animations were particularly the worst.

I tried the same site in Chrome for iOS and the animations were smooth, which was surprising especially considering that the two browsers supposedly use the same rendering engine on iOS.

It turns out I had 270+ open tabs in Safari. Closing all the tabs, then quitting and restarting Safari fixed these issues. The difference was night and day.

Fix

1. Close all open tabs.

   Safari has the ability to close all open tabs with a single action. Look for Close All Tabs in this Apple help page.

   Make sure the tabs are actually closed. Safari seems to either take a while or a couple of tries to close all open tabs if you have many of them.

2. Quit & restart Safari.

   Backgrounding may be sufficient, but quitting completely seems the more surefire approach.

Moorish