Animation working perfectly on FF and Chrome but breaks on Safari

As the title says I created a preloader animation for this website :

I previewed the json file on the Lottie website and it worked perfectly. It also works fine in Chrome and Firefox but if you load the site in Safari or iOS mobile its broken - the circles that animate in are there before the animation runs - see below 2 screen recordings :

Chrome+Sarafi bug recordings

Any idea would be great,