Search code examples
androidioscssuiwebview

animation-delay in IOS not working correctly

So I know that JS setInterval has issues in ios and android. I recently found that animation-delay in css also has issues. I have a loading spinner that has 8 dots that grow/shrink and the spinner spins. So at the start the top dot gets the animation to grow, then the next dot has a delay and then the animation is also applied. This makes it looks like it is chasing in a circle of red dots.

Here is a fiddle of the desired look. http://jsfiddle.net/3xjRF/

However on iOS and Android the delays are attached oddly. Sometimes the first 5 dots start animating at the same time or whatever. The key is the delay is either not being respected, rounded, applied at different times.

Any thoughts how to get css animation-delay to work properly in iOS webview? I tried using scale3d so it would run in the GPU but even then the delay was still the main issue. I'd like to do it in css vs a gif or what not.

#circularG {
  width: 90px;
  height: 90px;
  position: relative;
  margin:0 auto;
  top: 39%;
  z-index: 10000;
}
.circularG {
  position: absolute;
  background-color: #d4242c;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  -webkit-animation-name: bounce_circularG;
  -webkit-animation-duration: 1.28s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: linear;
  -moz-animation-name: bounce_circularG;
  -moz-animation-duration: 1.28s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: linear;
  border-radius: 14px;
  -o-animation-name: bounce_circularG;
  -o-animation-duration: 1.28s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: linear;
  -ms-animation-name: bounce_circularG;
  -ms-animation-duration: 1.28s;
  -ms-animation-iteration-count: infinite;
  -ms-animation-direction: linear;
}

#circularG_1 {
  left: 0;
  top: 35px;
  -webkit-animation-delay: 0.4800000000000001s;
  -moz-animation-delay: 0.4800000000000001s;
  -o-animation-delay: 0.4800000000000001s;
  -ms-animation-delay: 0.4800000000000001s;
}

#circularG_2 {
  left: 10px;
  top: 10px;
  -webkit-animation-delay: 0.64s;
  -moz-animation-delay: 0.64s;
  -o-animation-delay: 0.64s;
  -ms-animation-delay: 0.64s;
}

#circularG_3 {
  top: 0;
  left: 35px;
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  -ms-animation-delay: 0.8s;
}

#circularG_4 {
  right: 10px;
  top: 10px;
  -webkit-animation-delay: 0.9600000000000002s;
  -moz-animation-delay: 0.9600000000000002s;
  -o-animation-delay: 0.9600000000000002s;
  -ms-animation-delay: 0.9600000000000002s;
}

#circularG_5 {
  right: 0;
  top: 35px;
  -webkit-animation-delay: 1.12s;
  -moz-animation-delay: 1.12s;
  -o-animation-delay: 1.12s;
  -ms-animation-delay: 1.12s;
}

#circularG_6 {
  right: 10px;
  bottom: 10px;
  -webkit-animation-delay: 1.28s;
  -moz-animation-delay: 1.28s;
  -o-animation-delay: 1.28s;
   -ms-animation-delay: 1.28s;
}

#circularG_7 {
  left: 35px;
  bottom: 0;
  -webkit-animation-delay: 1.44s;
  -moz-animation-delay: 1.44s;
  -o-animation-delay: 1.44s;
  -ms-animation-delay: 1.44s;
}

#circularG_8 {
  left: 10px;
  bottom: 10px;
  -webkit-animation-delay: 1.6s;
  -moz-animation-delay: 1.6s;
  -o-animation-delay: 1.6s;
  -ms-animation-delay: 1.6s;
}

@-webkit-keyframes bounce_circularG {
  0% {
-webkit-transform:scale(1)
  }
  100% {
    -webkit-transform:scale(.3)
  }
}

@-moz-keyframes bounce_circularG {
  0% {
    -moz-transform:scale(1)
  }
  100% {
    -moz-transform:scale(.3)
  }
}

@-o-keyframes bounce_circularG {
  0% {
    -o-transform:scale(1)
  }
  100% {
    -o-transform:scale(.3)
  }
}

@-ms-keyframes bounce_circularG {
  0%{
    -ms-transform:scale(1)
  }
  100% {
    -ms-transform:scale(.3)
  }
}

Thanks

Solution

  • Looks like the issues was related to when the css was applied to the dom. To get around this Instead of using the same animation with a different delay for each elem, I used a keyframe animation for each elem that useds a keyframe offset. This allowed the dom to apply the animations and not have to worry about delay. This took a bit more css but works in ios. It's a bit ugly and keep in mind you have to prefix with all the browsers so you need a -wekbit and so on. You can see how each dot has a different offset and the last few have starting offsets so it makes a full rotation

    @-ms-keyframes bounce_circularG1 {
  0% {
    -ms-transform:scale(1)
  }
  40%, 100% {
    -ms-transform:scale(.3)
  }
}
@-ms-keyframes bounce_circularG2 {
  13.5% {
    -ms-transform:scale(1)
  }
  0%, 12.5%, 43.5%, 100% {
    -ms-transform:scale(.3)
  }
}
@-ms-keyframes bounce_circularG3 {
  26% {
    -ms-transform:scale(1)
  }
  0%,25%, 46%, 100% {
    -ms-transform:scale(.3)
  }
}
-ms-keyframes bounce_circularG4 {
  38.5% {
    -ms-transform:scale(1)
  }
  0%, 37.5%, 78.5%,100% {
    -ms-transform:scale(.3)
  }
}
@-ms-keyframes bounce_circularG5 {
  51% {
    -ms-transform:scale(1)
  }
  0%, 50%, 91%,100% {
    -ms-transform:scale(.3)
  }
}
@-ms-keyframes bounce_circularG6 {
  63.5% {
    -ms-transform:scale(1)
 }
  3.5%, 62.5% {
    -ms-transform:scale(.3)
  }
  0%, 100% {
    -ms-transform:scale(.37)
  }
}
@-ms-keyframes bounce_circularG7 {
  76% {
    -ms-transform:scale(1)
  }
  16%, 75%{
    -ms-transform:scale(.3)
  }
  0%, 100% {
    -ms-transform:scale(.58)
  }
}
@-ms-keyframes bounce_circularG8 {
  88.5% {
    -ms-transform:scale(1)
  }
  29.5%, 87.5% {
    -ms-transform:scale(.3)
  }
  0%, 100% {
    -ms-transform:scale(.80)
  }
}