Wow I know I haven’t been here in a while when your face brought back every single newb memory I had to the surface. Good to hear from you again.
Long story short, I’m using WordPress for my personal portfolio site. I’m using a free theme called “Responsive” as a sort of framework. I had an interesting idea to use an animated SVG graphic as an icon just for added flare. So I copied my coding into their existing DIV structure, and followed suit with my CSS and jQuery also. It was soon discovered that SVG fill’s don’t like to obey transitions when in an anchor tag with
http:// prepended to them. So, simple enough, I went into header.php and removed
<?php echo home_url(); ?> from
#logo a and replaced it with my absolute URL with no
http:// prepended. My fill animation transition worked beautifully, but there was a huge problem…
…my logo (that was supposed to link to home) now had a hyperlink of “http://mysite.ext/mysite.ext”. Something in the code was watching for when that anchor
href didn’t match the site URL and when it didn’t, it prepend that value back on.
So I was left with 2 choices:
<?php echo home_url(); ?> alone and suffer defeat at the hands of Chrome and Safari which gave a harsh on/off animation to the fill color transition ( yeah, weirdly enough FireFox had no issue with it).
2) Suffer defeat at the hands of Chrome and Safari, and find another way to accomplish what I’m looking to do.
But I decided to kick the door down to option 3, and try to get help hunting down this elusive glitch of a code and try to nullify it. There is absolutely no reason to have something like this in a theme unless you’re trying to make it difficult for less experienced coders to hack, especially a free theme in the WP Repository.
Responsive in the WP Repository
My Site (I opted for a pure CSS solution for now, which I hate, until this gets resolved)