CSS动画在iOS设备上不同步？

Question

我制作了一个简单的动画，我希望使用CSS动画作为我的网站的预加载器。

除了iOS设备之外，它似乎工作得非常漂亮，其中单独的元素似乎不同步，最终只做自己的事情。

您可以在手机here

上看到小提琴并亲自尝试

更新

很奇怪 - 所以JSfiddle似乎在iOS上工作得很好但是当我的网站上存在相同的代码时，它似乎搞砸了吗？你可以看到 here

让我觉得它实际上与我的预加载脚本有关吗？

$(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);
  }
}