SVG Anchor Tag PHP Function Animation Transition Madness

[bmoneruiux]

Tried to do an all CSS version while waiting on you to contact Lea. It looks great in the Pen, but it looked mangled and crazy on the site lol.

[chrisburton]

but it looked mangled and crazy on the site lol.

If it works on CodePen it should work on the site. Something is wrong or overriding your CSS. When you say “mangled”, make sure we can see what it’s doing. That may be able to help pinpoint the problem.

Lea hasn’t responded yet but I bet it’s not a bug and something is wrong within your CSS.

[bmoneruiux]

Hey Chris…I did some sniffing and I think there’s a event listener on #logo a to see if <?php echo home_url( '/' ); ?> is still the value of the href attribute. And if it’s not, it prepends that missing value to whatever value you may have in there.

Can’t prove it yet though as I’m not amazing at JS or jQuery…yet…

But that’s the only explanation I have for this as PHP can’t replace a value all on it’s own like that from what I know (which is little).

[chrisburton]

Hey, I’ll have to take a look tomorrow morning. I’m not that experienced with jQuery but I’ll do my best.

[bmoneruiux]

@chrisburton @thedoc

No need. I’m stupid…I forgot that any text in the href without a protocol is assumed to be a relative path if there is no / or protocol. But the root of the problem is that there’s a Chrome and Safari bug with fill transition animations placed on a PREVIOUSLY visited link SVG graphic. The workaround is to use something like:

<a href="http:/mysite.com/?foo=<?php echo rand(0, 99999) ?>">My Link</a>

…to confused the browser into thinking it’s a brand new link. And since that function is crap, the browser will 99% of the time ignore it and settle on just the URL. Which would then restore the workings of the SVG fill transition.

The other workaround offered was something like:

$('body').on('click', 'a', function() {
    e.preventDefault();
    var url = $(this).prop('href');
    window.location.href = url.split("?")[0];
});

…But I’m not 100% on it’s usage yet.

Chrome Bug

[chrisburton]

I would go with the php solution. I posted the issue on SO but never received a proper answer.

[Author]

Posts