I have a problem similar to this one : here.
Only difference is that the page I want to link the SVG to is an external page meaning : http://www.google.ca
Currently in my code, changing the link to an internal page makes the css3 transition work but having it link to an external (http://) overrides the css3 transition I made.
If anyone has a workaround this issue or has dealt with this before. Please help!
Thanks!
code
EDIT: Forgot! JFIDDLE LINK
This is actually something to do with the visited state. The reason the other commenters are saying it works is because they haven't been to your pages before. Once they have it will no longer work. I've tried adding visited states in the CSS and it makes no difference.
The easiest solution I've found is to just add a random query string to the url so the page is effectively not visited eg:
<a href="http:/mysite.com/?foo=<?php echo rand(0, 99999) ?>">My Link</a>
Most sites will ignore a query they don't recognise so that should be ok. Or better would be to remove it with JS on click.
$('body').on('click', 'a', function(e) {
e.preventDefault();
var url = $(this).prop('href');
window.location.href = url.split("?")[0];
});
The bug still exists in at least Safari and IE 11 as of this writing but using currentColor
for the SVG’s fill seems to fix it!
http://codepen.io/jifarris/pen/RREapp
<svg><path fill="currentColor"/></svg>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With