CODEWITHSUNDEEP
javascriptsvgmobile-safari
Pointy
Pointy

Reputation: 413709

Safari: SVG in <label> elements don't seem to work with "click" events

I've got a site design with SVG elements for "fancy" radio buttons and checkboxes. The basic idea is that the actual HTML element is effectively hidden (moved off the visible page, because IE doesn't like input elements to be actually hidden) and then nice-looking SVG icons are used for the visible interactive elements.

The problem is that Safari on iOS seems to not propagate "click" events on the SVG elements up to the <label> wrappers. So I've got:

<input type=checkbox class=not-visible id=foo>

then

<label for=foo><svg>...</svg></label>

On all desktop browsers and Android, that works fine. Tapping the SVG icon propagates a "click" event to the <label>, which results in a "click" on the actual checkbox element. On Safari, it does not work. I've tried setting via CSS the pointer-events property to none, and that sometimes helps but not always. I have not been able to figure out what the pattern is.

Ideas?

edit — it occurs to me that I left out two facts of interest:

Upvotes: 2

Views: 2372

Answers (1)

Pointy
Pointy

Reputation: 413709

Disabling Fastclick and making sure that my <svg> elements are styled with 

pointer-events: none;

seems to make things work. I'm not 100% sure it always works, but in my test cases I can't find any of my fancy checkboxes or radio buttons that don't work.

Upvotes: 2

Related Questions