0
down vote
favorite
1
I’m having real issues with Safari and CSS transforms, I’ve built an animated clock icon out of css and it works perfectly across Explorer, Chrome, Opera and Firefox but looks completely out of wack in Safari for some reason.
It appears as if the transform: rotate(); rule isn’t being applied and I’m not sure if it’s an issue with the transform rule or with nth-child selector being used by Safari.
I’m applying all of the fallbacks for webkit, opera and mozilla as below:
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
transform: rotate(12deg);
But no joy. I’ve tried changing the elements to block elements, I’ve tried removing white space from the transform rules and I’ve tried changing the nth-child selector to nth-of-type. Nothing seems to make a difference.
I’ve set up a jsfiddle to save posting all of the code here, you can find my usage here: https://jsfiddle.net/h98ejLsd/
Any advice would be greatly appreciated.
