CSS Animations out of sync on iOS devices? - ios

Question

I've made a simple animation I want to use as a pre-loader for my website using CSS animations.
It seems to work beautifully on everything except iOS devices, where the separate elements seem to fire out of sync and end up just doing their own thing.
You can see the fiddle and try it own on your phone here
UPDATE:
Weird – so the JSfiddle seems to work fine on iOS but when the same code comes into practice live on my site it seems to mess things up? you can see it here
Makes me think its actually something to do with my pre-loading script?
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut(300); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
CSS
.square {
background: #61CAFF;
width: 150px;
height: 150px;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-animation: shrinkgrow 3s ease-in-out infinite;
animation: shrinkgrow 3s ease-in-out infinite;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.circle {
background: #9DFDC3;
width: 150px;
height: 150px;
border-radius: 50%;
-webkit-animation: shrinkgrow 3s ease-in-out infinite;
animation: shrinkgrow 3s ease-in-out infinite;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 80px 140px 80px;
border-color: transparent transparent #F896D5 transparent;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-animation: shrinkgrow 3s ease-in-out infinite;
animation: shrinkgrow 3s ease-in-out infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
#-webkit-keyframes shrinkgrow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
12.5% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
33% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}
#keyframes shrinkgrow {
0% {
-webkit-transform: scale(0);
transform: scale(0);
}
12.5% {
-webkit-transform: scale(1);
transform: scale(1);
}
25% {
-webkit-transform: scale(1);
transform: scale(1);
}
33% {
-webkit-transform: scale(0);
transform: scale(0);
}
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
}