SVG transition on hover fails in Safari 9.1.2 (116

Question

I am trying to fade text and .svg to another color on hover.

a{
  color: #ff0000;
  display: inline-block;
  margin: 0 0 0 1em;
  text-decoration: none;
  text-transform: lowercase;
  transition: color 1s linear;
}
a:hover{
  color: #000;
}
svg{
  vertical-align: middle;
  width: 2em;
}
path{
  transition: fill 1s linear;
  fill: #ff0000;
 }
a:hover path{
  fill: #000;
}

<a href="http://example.com" class="tweet-this">
    <i class="icon icon-twitter">
        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><title>twitter</title><path d="M24.679 10.658c-.651.281-1.35.471-2.083.556.749-.437 1.324-1.13 1.595-1.955-.701.405-1.477.699-2.303.858-.662-.687-1.604-1.116-2.647-1.116-2.003 0-3.627 1.582-3.627 3.535 0 .277.032.546.094.805-3.014-.147-5.687-1.554-7.476-3.693-.312.522-.491 1.129-.491 1.777 0 1.226.64 2.308 1.614 2.942-.594-.018-1.154-.177-1.643-.442v.045c0 1.712 1.25 3.141 2.909 3.466-.304.081-.625.124-.956.124-.234 0-.461-.022-.682-.063.462 1.404 1.801 2.426 3.388 2.455-1.241.948-2.805 1.513-4.505 1.513-.292 0-.581-.017-.865-.049 1.605 1.003 3.512 1.588 5.56 1.588 6.671 0 10.32-5.385 10.32-10.056l-.01-.457c.709-.498 1.323-1.121 1.81-1.829" fill="#fff"></path></svg>
    </i>
    Tweet this
</a>

The transition on the .svg does not fire in Safari, but it does in Chrome and Firefox.

This answer states that you need a starting and an end color, which I have.

How can I make the transition work in Safari as well?

Answer 1

I was pointed to an article on rrott.com titled "Bug with CSS transition animation for SVG in Safari."

Juicy bits:

I found that the transition stops working for all the visited links and that could be the reason why I was not able to reproduce the issue on one machine while it is failed on another.

and

Sadly, changing :visited pseudo in CSS as well as using xmlns:xlink inside of SVG does not make transition working again and there are no hacks there.

The article also lists a number of possible solutions:

I see several solutions there but, unfortunately, none of them are good enough:

1. add some random data to the link(something like /#timestamp that looks ugly but the link will always be ‘unvisited’ for the users).

2. Do not use animation and inlined SVG in links.

3. Put link above SVG image using position and z-index so the image is 'clickjacked’. It works but requires additional js code to handle image’s hover event to not loose on hover animation, e.g. add Jquery code that will handle clicks on logo and change window.location.

4. Dynamically move SVG outside of the link in case of Safari.

5. Leave it as is if you have low amount of Safari users.

I'll go with number 5 for now.