I have a CSS spinner that works everywhere except on iOS Chrome. In iOS Chrome the animation is very jerky and is breaking the intended smooth sequence. Here is the code I have at the moment:
HTML
<div class="spinner">
<span class="child1"></span>
<span class="child2"></span>
<span class="child3"></span>
<span class="child4"></span>
<span class="child5"></span>
<span class="child6"></span>
<span class="child7"></span>
<span class="child8"></span>
</div>
CSS
@keyframes loader {
0% {
background-color: #ffffff;
}
100% {
background-color: transparent;
}
}
.spinner {
border-radius: 100px;
height: 100px;
position: relative;
transform: scale(0.6);
width: 100px;
}
.spinner span {
animation-direction: normal;
animation-duration: 1.04s;
animation-iteration-count: infinite;
animation-name: loader;
background: transparent none repeat scroll 0 0;
border-radius: 50px;
display: inline-block;
height: 16px;
position: absolute;
width: 16px;
}
.spinner span.child1 {
animation-delay: 0.39s;
left: 50%;
margin-left: -8px;
top: 0;
}
.spinner span.child2 {
animation-delay: 0.52s;
left: 71px;
top: 13px;
}
.spinner span.child3 {
animation-delay: 0.65s;
margin-top: -8px;
right: 0;
top: 50%;
}
.spinner span.child4 {
animation-delay: 0.78s;
left: 71px;
top: 72px;
}
.spinner span.child5 {
animation-delay: 0.91s;
bottom: 0;
left: 50%;
margin-left: -8px;
}
.spinner span.child6 {
animation-delay: 1.04s;
left: 13px;
top: 72px;
}
.spinner span.child7 {
animation-delay: 1.17s;
left: 0;
margin-top: -8px;
top: 50%;
}
.spinner span.child8 {
animation-delay: 1.3s;
left: 13px;
top: 13px;
}
I have all the CSS prefixes as well -webkit-
, -o-
, -ms-
...
If anyone can shed some light on where it is I'm going wrong, that'd be great.
http://codepen.io/anon/pen/qdmYaQ
Thanks in advance.
I figured it out! I had 2 animations on the page going off at the same time which was causing a lag. Also see: http://chrissilich.com/blog/fix-css-animation-slow-or-choppy-in-mobile-browsers/