I have an animation which is working fine in all browsers but Safari.
What happens is:
- animation runs OK for a couple of iterations
- after a few iterations, the first quarter (red background) and the final quarter (green background) still show correctly but the middle two (yellow and pink backgrounds) just remain blank when it's their time to show.
- the general timing is not affected - if I run it next to a Chromium browser, the timing syncs up just fine. Only the middle two sections are missed out..
I've tried:
- adding
-webkit-prefix - using JS to recognise Safari browser, which works but unsure what to do next.
Here is a jsFiddle of the code: https://jsfiddle.net/asking_for_a_friend/xh5gvyt4/2/