Ember.js: Action handler doesn't work in SVG on Safari

[jdmarshall]

I don't feel like I've isolated the cause entirely, so I'm hoping you folks can sort this out.

This issue is reproducible on both Safari and mobile Safari, so I'm guessing this isn't a touch event problem.

Adding an action to an SVG element does not cause it to be fired when clicked, even on desktop Safari. I have tried adding an action to an <a> tag, a <g> and a <use> tag and none have worked.

I'm not sure if this is related, but when I tried to replace the action with a straight anchor, I discovered that Safari interprets the SVG spec pretty literally regarding the href attribute, or rather the xlink:href attribute. On Safari any <a href="http://www.google.com"> tag inside of an SVG element will do nothing when the anchor is clicked, while navigation will occur on Firefox or Chrome. You need an <a xlink:href="http://www.google.com"> to make all 3 happy.

Except on Safari the action still never fires. Instead the browser navigates to the href.

Notes:

The "cursor: pointer" workaround from #605 doesn't change the behavior.

Someone came up with this jsfiddle for a different SVG related problem:

http://jsfiddle.net/EzfwV/3/

This fiddle works as expected on Safari and mobile Safari.

[jdmarshall]

I have winnowed it down a bit.

Actions don't fire if the SVG element has its own xlink:href, which means that <text> or <circle> are fine bit <use> is not.

http://jsfiddle.net/d6wz3sL5/1/

Clicking the dot works on Firefox and Chrome, but not Safari.

[jdmarshall]

My workaround was to put a clear rectangle in front of every sprite but I'm not sure how well that will scale.

[rwjblue]

Updated the demo to canary: http://rwjblue.jsbin.com/pebohe/edit?html,js

Still seems to be an issue on Safari (Chrome works fine). I'm not sure this is an Ember bug though.

@mixonic - Thoughts?

[locks]

@rwjblue @mixonic can we get a ruling on this? :]

[mixonic]

This needs investigation as to what Safari is doing. There isn't anything to rule on until we understand what the problem is.

[Serabe]

I cannot reproduce the bug in Safari Version 9.1 (11601.5.17.1). I click the dot and it shows gone (both @jdmarshall and @rwjblue's versions).

[locks]

I am closing this issue since I also confirm it works properly on Safari 9.1.
Feel free to re-open the issue if you think it's still justified, thank you.

[daniellabirch]

I have reproduced this bug in safari. When I use an <a> tag in an svg element, I have to specify xlink:href to get the link to fire when clicked. I also need to include the full http protocol in the link to get the link to fire.

[MattFromPhilly]

Yes! Using xlink:href worked, even though the specs say that that is deprecated and you should be just using href now.

Thanks for the tip!