23

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;
  }
}
Brenda
  • 835
  • 8
  • 11

4 Answers4

9

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.

vals
  • 61,425
  • 11
  • 89
  • 138
  • Thanks for looking at this, and I like a lot of your suggestions for optimization, (especially using sprites), but your answer doesn't address my original question, which was about buggy performance in desktop Safari, mobile Safari, and mobile Chrome. In your solution, the animation doesn't run at all for me when I tested it in these browsers (iOS iPhone 6, OSX Yosemite), the bags just load statically and never animate. – Brenda Jul 19 '15 at 15:23
  • 1
    I forgot to set the webkit prefixes. I am unable to test it on those browsers, but I have added webkit prefixes and now it should run. (May be using calc in the delays could cause problems.. in this case, just set the value by hand. I kept th calc version so that it is easy to see what is going on) – vals Jul 19 '15 at 17:13
  • I haven't had much time this week, but I started refactoring what you have above to please Safari by using Sass to do the calculations, and using the longform instead of the shorthand for the satchel animation, and was seeing some good performance! The timing is a bit off towards the end of the animation, but this is setting me on a good direction. I will post when I have finished the refactoring. Thank you vals! – Brenda Jul 22 '15 at 11:20
6

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?)

Gerben van Dijk
  • 868
  • 6
  • 15
  • Funny, my first try used cubic-bezier curves. But I didn't like how little I could control them. http://codepen.io/brendamarienyc/pen/RPjGLJ I just tried switching to transitions (nice suggestion), and using a transition-delay, and activated the opacity change of each bag with JavaScript with setTimeout, and the transition-delays behaved exactly in the same sporadic way as the animation-delays did. As you can tell, I have been throwing the kitchen sink at this to see if anything made a performance difference. I think it's just too many GPUs for mobile and am switching to jQuery. Thanks! – Brenda Jul 14 '15 at 21:27
4

from what i see you are not actually giving delays to elements correctly, animation delay assignment must be something like this.

.satchel-strap.satchel-#{$i}{
     animation-delay: $bag-piece-timing * 1.5 * $i
  }

  .satchel-body.satchel-#{$i}{
     animation-delay: $bag-piece-timing * $i;
  }

  .satchel-gusset.satchel-#{$i}{
     animation-delay: $bag-piece-timing * 0.5 * $i
  }

  .satchel-piping.satchel-#{$i}{
    animation-delay: $bag-piece-timing;
  }

  .stachel-collar.satchel-#{$i}{
    animation-delay: $bag-piece-timing;
  }
Ammadu
  • 1,675
  • 15
  • 17
0

I played a bit with the CSS as well as I looked for mobile webkit specific issues but I didn't find anything helpful.

So basically I refactored the problem and used CSS transitions for the fade-in/out effects and jQuery for managing the tempo of these animations.

See the Demo.

I tested it on iOS and Safari, as well as other browsers, and it worked well for me.

HTML (regrouped images by bag model)

<div id="bag1" class="bag shown">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-body-black-croc.png" class="satchel-static satchel-body">
  <!-- <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-collar-blue-python.png" class="satchel-3 satchel-collar"> -->
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-gusset-black-croc.png" class="satchel-static satchel-gusset">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-piping-black-croc.png" class="satchel-static satchel-piping">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-strap-black-croc.png" class="satchel-static satchel-strap">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/196308/satchel-narrow-marble-python.png" class="satchel-static satchel-narrow">
</div>

<div id="bag2" class="bag">
  <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-collar-bone.png" class="satchel-4 satchel-collar"> -->
  <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>

<div id="bag3" class="bag">
  <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-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>

CSS (replaced all CSS3 animations for these few lines of code)

.bag img {
  z-index: 0;
  opacity: 0;
  -webkit-transition: opacity .1s ease-in-out;
  transition: opacity .1s ease-in-out;
}

.shown img {
  opacity: 1;
}
.shown img.satchel-strap, .shown img.satchel-narrow {
  z-index: 2;
}

.bag .fadeIn {
  opacity: 1;
  z-index: 1;
}
.bag .fadeIn.satchel-strap, .bag .fadeIn.satchel-narrow {
  z-index: 3;
}

jQuery (you can set the animation parameters)

$(document).ready(function() {

  var $bags         = [$('#bag1'), $('#bag2'), $('#bag3')],
      piecesDelay   = 400,
      bagsDelay     = 3000,
      timePiecesID,
      imgs;


  setTimeout(function() { 
    loopThroughBags(1, 0); 
  }, bagsDelay);


  function fadeInPieces(k) {
    $(imgs[k]).addClass('fadeIn');

    timePiecesID = setTimeout(function() {
      if (k < imgs.length - 1) {
        k++;
        fadeInPieces(k);
      } else {
        clearTimeout(timePiecesID);
        return;
      }
    }, piecesDelay);

  } // fadeInPieces ends


  function loopThroughBags(i, j) {

    imgs = $bags[i].find('img');

    fadeInPieces(0);

    setTimeout(function() {

      clearTimeout(timePiecesID);

      $bags[i].addClass('shown');
      $(imgs).removeClass('fadeIn');
      $bags[j].removeClass('shown');

      j = i;
      i = (i < $bags.length - 1) ? i + 1 : 0;

      loopThroughBags(i, j);

    }, bagsDelay);

  } // loopThroughBags ends

});
Oriol
  • 11,660
  • 5
  • 35
  • 37