CSS rotate animation doesn't start properly in Safari

Question

I'm using SASS so my CSS syntax looks weird, but anyway, the problem is, that my rotate animation starts well on chrome and firefox, but works only partially on Safari. To be specific, rotateY, scale, skew work normally, but rotate and translateX don't. What is more importat, after I go to another tab and then go back in Safari - suddenly it works as expected.

This is the animation in Safari (before switching tabs):

Safari

Instead of that:

Chrome

Basically, all images appear in the center, and only scale and rotateY animation works, but translate and rotate transitions don't.

To keep it simple this is only the part of the code I use for Safari:

@mixin orbit ($name,$time,$modifier,$skewX,$skewY,$perspective,$rotateY,$startScale,$middleScale){
@at-root (without: media) {
    @-webkit-keyframes myOrbit_#{$name} {
        from { -webkit-transform: rotate($modifier+deg) translateX(150%) rotate($modifier+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY(0deg) scale($startScale,$startScale); }
        50% { -webkit-transform: rotate($modifier+(-180)+deg) translateX(150%) rotate($modifier+180+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY/2+deg) scale($middleScale,$middleScale); }
        to { -webkit-transform: rotate($modifier+(-360)+deg) translateX(150%) rotate($modifier+360+deg) skewX($skewX+deg) skewY($skewY+deg) perspective($perspective+px) rotateY($rotateY+deg) scale($startScale,$startScale); }
    }
-webkit-animation: myOrbit_#{$name} $time+s linear infinite;
}

Answer 1

I've noticed that when I defined the animation with

-webkit-animation-play-state: paused;

then the "satellites" were positioned properly. So the solution was to start the animation with time offset. In my case this helped:

-webkit-animation-delay: 5ms;

One tricky thing was that I had to put it after other -moz- -o- and "regular" animation properties, otherwise is didn't work, like if it was overwritten.