CSS animation-delay timing off in Safari and mobile Chrome

Question

I've got a frustrating bug in Safari around CSS animation-delay.

This animation works beautifully on Desktop in Chrome, Firefox, IE11, IE10, but I get mixed results in Safari. The pieces of the bag should all display after an equal amount of pause (controlled by the animation-delay).

Desktop Safari will sometimes display correctly, and other times will slow down the first part of the bag transition and speed up the end, or it will clump a few transitions together. In mobile Safari and mobile Chrome on an iPhone 6, sometimes it will just ignore the animation-delay all together and transition the whole bag at once. I'm having a hard time troubleshooting when the performance isn't consistent. I added a little JavaScript to make sure that all the assets were loaded on the page before starting the animation, but that didn't seem to help. Anyone have any idea what's happening here?

http://codepen.io/brendamarienyc/pen/qdoOZM

@-webkit-keyframes bag-1 {   0%,      19.9% {     opacity: 0;   }   20%,     100% {     opacity: 1;   } } @keyframes bag-1 {   0%,      19.9% {     opacity: 0;   }   20%,     100% {     opacity: 1;   } } .satchel-1 {   -webkit-animation-name: bag-1;           animation-name: bag-1;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translateZ(0);           transform: translateZ(0);   opacity: 0; } .preload .satchel-1 {   -webkit-animation-name: none !important;           animation-name: none !important; }  @-webkit-keyframes bag-2 {   0%,      39.9% {     opacity: 0;   }   40%,     100% {     opacity: 1;   } }  @keyframes bag-2 {   0%,      39.9% {     opacity: 0;   }   40%,     100% {     opacity: 1;   } } .satchel-2 {   -webkit-animation-name: bag-2;           animation-name: bag-2;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translateZ(0);           transform: translateZ(0);   opacity: 0; } .preload .satchel-2 {   -webkit-animation-name: none !important;           animation-name: none !important; }  @-webkit-keyframes bag-3 {   0%,      59.9% {     opacity: 0;   }   60%,     100% {     opacity: 1;   } }  @keyframes bag-3 {   0%,      59.9% {     opacity: 0;   }   60%,     100% {     opacity: 1;   } } .satchel-3 {   -webkit-animation-name: bag-3;           animation-name: bag-3;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translateZ(0);           transform: translateZ(0);   opacity: 0; } .preload .satchel-3 {   -webkit-animation-name: none !important;           animation-name: none !important; }  @-webkit-keyframes bag-4 {   0%,      79.9% {     opacity: 0;   }   80%,     100% {     opacity: 1;   } }  @keyframes bag-4 {   0%,      79.9% {     opacity: 0;   }   80%,     100% {     opacity: 1;   } } .satchel-4 {   -webkit-animation-name: bag-4;           animation-name: bag-4;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translateZ(0);           transform: translateZ(0);   opacity: 0; } .preload .satchel-4 {   -webkit-animation-name: none !important;           animation-name: none !important; }  @-webkit-keyframes bag-5 {   0%,      99.9% {     opacity: 0;   }   100%,     100% {     opacity: 1;   } }  @keyframes bag-5 {   0%,      99.9% {     opacity: 0;   }   100%,     100% {     opacity: 1;   } } .satchel-5 {   -webkit-animation-name: bag-5;           animation-name: bag-5;   -webkit-animation-duration: 22500ms;           animation-duration: 22500ms;   -webkit-animation-iteration-count: infinite;           animation-iteration-count: infinite;   -webkit-transform: translateZ(0);           transform: translateZ(0);   opacity: 0; } .preload .satchel-5 {   -webkit-animation-name: none !important;           animation-name: none !important; }  .satchel-container {   height: 450px;   width: 472px;   margin: 2em auto;   position: relative; } @media (max-width: 500px) {   .satchel-container {     height: 300px;     width: 315px;   } }  .satchel-shadow {   position: absolute;   right: 0px;   bottom: 0px;   left: 0px;   height: 94px;   width: 472px; } @media (max-width: 500px) {   .satchel-shadow {     height: 63px;     width: 315px;   } }  .satchel-body {   position: absolute;   right: 0px;   bottom: 0px;   left: 0px;   height: 295px;   width: 472px;   -webkit-animation-delay: 0;           animation-delay: 0; } @media (max-width: 500px) {   .satchel-body {     height: 197px;     width: 315px;   } }  .satchel-gusset {   position: absolute;   bottom: 30px;   left: 14px;   height: 221px;   width: 441px;   -webkit-animation-delay: 450ms;           animation-delay: 450ms; } @media (max-width: 500px) {   .satchel-gusset {     position: absolute;     bottom: 20px;     left: 10px;     height: 149px;     width: 294px;   } }  .satchel-piping {   position: absolute;   bottom: 22px;   left: 21px;   height: 268px;   width: 429px;   -webkit-animation-delay: 900ms;           animation-delay: 900ms; } @media (max-width: 500px) {   .satchel-piping {     position: absolute;     bottom: 15px;     left: 14px;     height: 179px;     width: 286px;   } }  .satchel-collar {   position: absolute;   bottom: 15px;   left: 30px;   height: 63px;   width: 412px;   -webkit-animation-delay: 900ms;           animation-delay: 900ms; } @media (max-width: 500px) {   .satchel-collar {     position: absolute;     bottom: 7px;     left: 20px;     height: 42px;     width: 275px;   } }  .satchel-strap {   position: absolute;   bottom: 70px;   left: 139px;   height: 370px;   width: 195px;   -webkit-animation-delay: 1350ms;           animation-delay: 1350ms; } @media (max-width: 500px) {   .satchel-strap {     position: absolute;     bottom: 47px;     left: 92px;     height: 247px;     width: 130px;   } }  .satchel-narrow {   position: absolute;   bottom: 68px;   left: 13px;   height: 232px;   width: 377px;   -webkit-animation-delay: 1800ms;           animation-delay: 1800ms; } @media (max-width: 500px) {   .satchel-narrow {     position: absolute;     bottom: 46px;     left: 8px;     height: 155px;     width: 251px;   } } 

Answer 1

Even though in Chrome displays fine, even there there are performance problems. Trying to get performance stats is buggy, and making 6 copies of the base design and disabling GPU reproduces the problem on my machine (Chrome on Windows).

Well, here is my attempt to optimize the performance of your design.

First of all, you are using opacity, but without transition - moving very fast from 0 to 1. If all that you want is change the element visibility, you can use visibility for this. It will run much faster.

Second, you are using an animation that is different for the 5 different bags. And that keeps the first bags visible - but hidden under the other ones in the last part of the animation. You can reuse the same animation for all the elements, just changing the animation delay. You will see in my demo that the keyframes are simpler, at the cost of an increased complexity in the animation delay. Notice also that I turn off visibility as soon as posible, to avoid the cost of displaying an otherwise invisible element.

The way you handled the overlays asked for the first element of each class to be repeated, once static and another showing for some instants at the end of the cycle. I have changed this schema for another one where I am changing the z-index of the elements. Now you don't need to repeat the element.

And last, I have grouped several items under a bag class, and I am turning off also the visibility of the bag container. I believe that this somehow optimizes the performance, but I am not sure about it

My demo:

@-webkit-keyframes satchel {    0% {      visibility: visible;      z-index: 100;    }    25% {      visibility: visible;      z-index: 1;    }    25%, 100% {      visibility: hidden;    }  }  @keyframes satchel {    0% {      visibility: visible;      z-index: 100;    }    25% {      visibility: visible;      z-index: 1;    }    25%, 100% {      visibility: hidden;    }  }    .satchel-1, .satchel-2, .satchel-3, .satchel-4, .satchel-5 {      -webkit-animation: satchel 22500ms infinite;      animation-name: satchel;      animation-duration: 22500ms;      animation-iteration-count: infinite;  }    /* body 0ms gusset 450ms collar=900ms piping=900ms strap=1350ms narrow=1800ms  */  .satchel-1.satchel-body {      -webkit-animation-delay: calc(0ms - 22500ms);      animation-delay: calc(0ms - 22500ms);  }  .satchel-1.satchel-gusset {      -webkit-animation-delay: calc(450ms - 22500ms);      animation-delay: calc(450ms - 22500ms);  }  .satchel-1.satchel-collar {      -webkit-animation-delay: calc(900ms - 22500ms);      animation-delay: calc(900ms - 22500ms);  }  .satchel-1.satchel-piping {      -webkit-animation-delay: calc(900ms - 22500ms);      animation-delay: calc(900ms - 22500ms);  }  .satchel-1.satchel-strap {      -webkit-animation-delay: calc(1350ms - 22500ms);      animation-delay: calc(1350ms - 22500ms);  }  .satchel-1.satchel-narrow {      -webkit-animation-delay: calc(1800ms - 22500ms);      animation-delay: calc(1800ms - 22500ms);  }    /* satchel-2 4500ms */  .satchel-2.satchel-body {      -webkit-animation-delay: calc(0ms + 4500ms - 22500ms);      animation-delay: calc(0ms + 4500ms - 22500ms);  }  .satchel-2.satchel-gusset {      -webkit-animation-delay: calc(450ms + 4500ms - 22500ms);      animation-delay: calc(450ms + 4500ms - 22500ms);  }  .satchel-2.satchel-collar {      -webkit-animation-delay: calc(900ms + 4500ms - 22500ms);      animation-delay: calc(900ms + 4500ms - 22500ms);  }  .satchel-2.satchel-piping {      -webkit-animation-delay: calc(900ms + 4500ms - 22500ms);      animation-delay: calc(900ms + 4500ms - 22500ms);  }  .satchel-2.satchel-strap {      -webkit-animation-delay: calc(1350ms + 4500ms - 22500ms);      animation-delay: calc(1350ms + 4500ms - 22500ms);  }  .satchel-2.satchel-narrow {      -webkit-animation-delay: calc(1800ms + 4500ms - 22500ms);      animation-delay: calc(1800ms + 4500ms - 22500ms);  }    /* satchel-3 9000ms */  .satchel-3.satchel-body {      -webkit-animation-delay: calc(0ms + 9000ms - 22500ms);      animation-delay: calc(0ms + 9000ms - 22500ms);  }  .satchel-3.satchel-gusset {      -webkit-animation-delay: calc(450ms + 9000ms - 22500ms);      animation-delay: calc(450ms + 9000ms - 22500ms);  }  .satchel-3.satchel-collar {      -webkit-animation-delay: calc(900ms + 9000ms - 22500ms);      animation-delay: calc(900ms + 9000ms - 22500ms);  }  .satchel-3.satchel-piping {      -webkit-animation-delay: calc(900ms + 9000ms - 22500ms);      animation-delay: calc(900ms + 9000ms - 22500ms);  }  .satchel-3.satchel-strap {      -webkit-animation-delay: calc(1350ms + 9000ms - 22500ms);      animation-delay: calc(1350ms + 9000ms - 22500ms);  }  .satchel-3.satchel-narrow {      -webkit-animation-delay: calc(1800ms + 9000ms - 22500ms);      animation-delay: calc(1800ms + 9000ms - 22500ms);  }  /* satchel-4 13500ms */  .satchel-4.satchel-body {      -webkit-animation-delay: calc(0ms + 13500ms - 22500ms);      animation-delay: calc(0ms + 13500ms - 22500ms);  }  .satchel-4.satchel-gusset {      -webkit-animation-delay: calc(450ms + 13500ms - 22500ms);      animation-delay: calc(450ms + 13500ms - 22500ms);  }  .satchel-4.satchel-collar {      -webkit-animation-delay: calc(900ms + 13500ms - 22500ms);      animation-delay: calc(900ms + 13500ms - 22500ms);  }  .satchel-4.satchel-piping {      -webkit-animation-delay: calc(900ms + 13500ms - 22500ms);      animation-delay: calc(900ms + 13500ms - 22500ms);  }  .satchel-4.satchel-strap {      -webkit-animation-delay: calc(1350ms + 13500ms - 22500ms);      animation-delay: calc(1350ms + 13500ms - 22500ms);  }  .satchel-4.satchel-narrow {      -webkit-animation-delay: calc(1800ms + 13500ms - 22500ms);      animation-delay: calc(1800ms + 13500ms - 22500ms);  }  /* satchel-5 18000ms */  .satchel-5.satchel-body {      -webkit-animation-delay: calc(0ms + 18000ms - 22500ms);      animation-delay: calc(0ms + 18000ms - 22500ms);  }  .satchel-5.satchel-gusset {      -webkit-animation-delay: calc(450ms + 18000ms - 22500ms);      animation-delay: calc(450ms + 18000ms - 22500ms);  }  .satchel-5.satchel-collar {      -webkit-animation-delay: calc(900ms + 18000ms - 22500ms);      animation-delay: calc(900ms + 18000ms - 22500ms);  }  .satchel-5.satchel-piping {      -webkit-animation-delay: calc(900ms + 18000ms - 22500ms);      animation-delay: calc(900ms + 18000ms - 22500ms);  }  .satchel-5.satchel-strap {      -webkit-animation-delay: calc(1350ms + 18000ms - 22500ms);      animation-delay: calc(1350ms + 18000ms - 22500ms);  }  .satchel-5.satchel-narrow {      -webkit-animation-delay: calc(1800ms + 18000ms - 22500ms);      animation-delay: calc(1800ms + 18000ms - 22500ms);  }    @-webkit-keyframes bag {    0%, 35% {      visibility: visible;    }    35%, 100% {      visibility: hidden;    }  }  @keyframes bag {    0%, 35% {      visibility: visible;    }    35%, 100% {      visibility: hidden;    }  }    .bag {      -webkit-animation-name: bag;      -webkit-animation-duration: 22500ms;      -webkit-animation-iteration-count: infinite;      animation-name: bag;      animation-duration: 22500ms;      animation-iteration-count: infinite;      z-index: 1000;      position: absolute;      height: 100%;      width: 100%;  }  .bag:nth-child(2) {      -webkit-animation-delay: calc(4500ms - 22500ms);      animation-delay: calc(4500ms - 22500ms);  }  .bag:nth-child(3) {      -webkit-animation-delay: calc(9000ms - 22500ms);      animation-delay: calc(9000ms - 22500ms);  }  .bag:nth-child(4) {      -webkit-animation-delay: calc(13500ms - 22500ms);      animation-delay: calc(13500ms - 22500ms);  }  .bag:nth-child(5) {      -webkit-animation-delay: calc(18000ms - 22500ms);      animation-delay: calc(18000ms - 22500ms);  }      .satchel-container {    height: 450px;    width: 472px;    margin: 2em;    position: relative;    display: inline-block;  }  @media (max-width: 500px) {    .satchel-container {      height: 300px;      width: 315px;    }  }    .satchel-shadow {    position: absolute;    right: 0px;    bottom: 0px;    left: 0px;    height: 94px;    width: 472px;  }  @media (max-width: 500px) {    .satchel-shadow {      height: 63px;      width: 315px;    }  }    .satchel-body {    position: absolute;    right: 0px;    bottom: 0px;    left: 0px;    height: 295px;    width: 472px;  }  @media (max-width: 500px) {    .satchel-body {      height: 197px;      width: 315px;    }  }    .satchel-gusset {    position: absolute;    bottom: 30px;    left: 14px;    height: 221px;    width: 441px;  }  @media (max-width: 500px) {    .satchel-gusset {      position: absolute;      bottom: 20px;      left: 10px;      height: 149px;      width: 294px;    }  }    .satchel-piping {    position: absolute;    bottom: 22px;    left: 21px;    height: 268px;    width: 429px;  }  @media (max-width: 500px) {    .satchel-piping {      position: absolute;      bottom: 15px;      left: 14px;      height: 179px;      width: 286px;    }  }    .satchel-collar {    position: absolute;    bottom: 15px;    left: 30px;    height: 63px;    width: 412px;  }  @media (max-width: 500px) {    .satchel-collar {      position: absolute;      bottom: 7px;      left: 20px;      height: 42px;      width: 275px;    }  }    .satchel-strap {    position: absolute;    bottom: 70px;    left: 139px;    height: 370px;    width: 195px;  }  @media (max-width: 500px) {    .satchel-strap {      position: absolute;      bottom: 47px;      left: 92px;      height: 247px;      width: 130px;    }  }    .satchel-narrow {    position: absolute;    bottom: 68px;    left: 13px;    height: 232px;    width: 377px;      animation-delay: calc(1800ms - 22500ms);  }  @media (max-width: 500px) {    .satchel-narrow {      position: absolute;      bottom: 46px;      left: 8px;      height: 155px;      width: 251px;    }  }

<section class="bag-animation">      <div class="satchel-container">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-shadow.png" class="satchel-shadow">          <!--Satchel Body-->        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-marble-python.png" class="satchel-1 satchel-body">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-celedon.png" class="satchel-2 satchel-body">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-blue-python.png" class="satchel-body satchel-3">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-bone.png" class="satchel-4 satchel-body">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-black-croc.png" class="satchel-5 satchel-body">          <!--bag marble-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-marble-python.png" class="satchel-1 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-marble-python.png" class="satchel-1 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-marble-python.png" class="satchel-1 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-blue-python.png" class="satchel-1 satchel-narrow">        </div>          <!--bag celedon-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-celedon.png" class="satchel-2 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-celedon.png" class="satchel-2 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-celedon.png" class="satchel-2 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-celedon.png" class="satchel-2 satchel-narrow">  	</div>          <!--bag blue-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-blue-python.png" class="satchel-3 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-blue-python.png" class="satchel-3 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-blue-python.png" class="satchel-3 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-blue-python.png" class="satchel-3 satchel-narrow">  	</div>          <!--bag bone-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-bone.png" class="satchel-4 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-bone.png" class="satchel-4 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-bone.png" class="satchel-4 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-bone.png" class="satchel-4 satchel-narrow">        </div>          <!--bag bone-->        <div class="bag">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-black-croc.png" class="satchel-5 satchel-gusset">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-black-croc.png" class="satchel-5 satchel-piping">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-black-croc.png" class="satchel-5 satchel-strap">        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-black-croc.png" class="satchel-5 satchel-narrow">        </div>        </div>        </section>

There is also another posibility, that will be much more efficient, but that is less flexible: You can group your images of the same class in a composite image, and handle this as a sprite change (modifying background-image position. You need however a full redesign for this one.

Answer 2

what about trying to use a simple transition in stead of a keyframe animation? you're only transitioning opacity here - maybe by using a custom bezier curve you can achieve the same effect.

you could also try replacing -webkit-transform: translateZ(0); with -webkit-transform: translate3d(0,0,0); - i've noticed slight timing issues between the two in the past (you're using this technique only to force the elements on their own hardware layer right?)