Broken SVG transition when there's a hash in the url

[cnix]

I’ve ran into a rather odd issue with the SVG fill transition. I have an icon set inside a link that jumps to the comments section on a page. The typical page jump kind of stuff. The fill transition on the icon works until the link is clicked and whatever the hash in the link is, is added to the URL. So for instance, a link likehttp://blog.com/post-one/#comments would break the transition on the svg element.

Here’s a pen of the issue…

http://codepen.io/cnix/pen/ywIcm

http://codepen.io/cnix/pen/ywIcm

Has anyone ever seen anything like this or know how to remedy it?

[Paulie_D]

It’s not clear to me what the issue is.

I’m not sure what this means.

link is clicked and whatever the hash in the link is, is added to the URL.

[cnix]

On the pen there, if you hover the icon, you get a nice transition from blue to black and vice versa. But if you click the link and then hover the icon again, the transition no longer works.

The link itself is just #comments. You can see it in the markup within the pen . But I’ve found that if the browser URL has a different hash than the link, there’s no problem. It’s only an issue if the browser URL contains the same hash as in the link.

So far, I’ve isolated it down to Chrome. No issue in Firefox. Still have to try Safari.

[Paulie_D]

Are you saying the the Codepen reproduces this issue?

If not, then we’d need to see it ‘not working’ in a live link.

[cnix]

Yes, the issue can be reproduced in the Codepen I’ve referenced above.

1. Hover the icon and observe the transition (if you can’t see the transition, hit “rerun”, force refresh or clear your cache)
2. Click on the icon
3. Hover the icon again and notice the transition no longer works. It’s just a hard color swap.

I slowed the transition down to make it more deliberate. It can’t be reproduced in Firefox which makes me think it’s a webkit issue.

[Paulie_D]

I think in the Codepen the problem is that the link (and hence the SVG) is 100% width so you are still hovered on the SVG.

See – http://codepen.io/Paulie-D/pen/AbgJz

[cnix]

Your Pen has the issue as well. Once you click on it, the transition no longer works on subsequent hovers.

Here’s a live example… http://projects.45royale.com/45royaleV8/blog/post/

Scroll down below the post text and hover the comments link. The transition will be in place. Now clicking the comments link obviously changes the URL to http://projects.45royale.com/45royaleV8/blog/post/#comments

Once #comments has been added to the URL, the transition on hover no longer works. The icon changes immediately, with no transition at all. And not only that, but it no longer works on any page, even if #comments is not in the URL.

[Paulie_D]

Ahhh…I see what you mean.

Weird.

[Paulie_D]

Hmm…just has a weird thought….aren’t there restrictions now on what you can style on visited links?

i don’t know if that could be a factor.

[Author]

Posts