The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Transform Rotate on nth-child not working in Safari

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #245309

    down vote
    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:

    Any advice would be greatly appreciated.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.