- This topic is empty.
June 23, 2014 at 8:13 pm #173511
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 like
http://blog.com/post-one/#commentswould break the transition on the svg element.
Here’s a pen of the issue…
Has anyone ever seen anything like this or know how to remedy it?June 24, 2014 at 2:35 am #173533
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.June 24, 2014 at 2:52 am #173538
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.June 24, 2014 at 3:23 am #173544
Are you saying the the Codepen reproduces this issue?
If not, then we’d need to see it ‘not working’ in a live link.June 24, 2014 at 10:17 am #173575
Yes, the issue can be reproduced in the Codepen I’ve referenced above.
- Hover the icon and observe the transition (if you can’t see the transition, hit “rerun”, force refresh or clear your cache)
- Click on the icon
- 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.June 24, 2014 at 10:22 am #173576
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.June 24, 2014 at 10:34 am #173577
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.June 24, 2014 at 1:11 pm #173592
Ahhh…I see what you mean.
Weird.June 24, 2014 at 1:25 pm #173593
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.
- The forum ‘CSS’ is closed to new topics and replies.