Modal triggers on SVG elements don't work on iOS

[ulilicht]

Hi,

when I place a bootstrap 3.2 Modal on an SVG element, it works fine on all devices except iOS (tested iPhone 5 and current iPad)
When i place an additional onclick="" attribute on the element, it works as expected.

I created a JSFiddle to test here:
SVG Modal does not work:
http://jsbin.com/lajilacajumu/1/edit?html,output

SVG Modal works:
http://jsbin.com/wiyasudumuto/1/edit?html,output

See the missing onclick="" on the first one.

Is it possible for Bootstrap to fix this somehow?

[ulilicht]

(Changed example to JSbin to fix HTML errors)

[cvrebert]

Sorry about that. JS Fiddle changed their markup recently, causing false-positives from the validator.

[cvrebert]

I cannot reproduce on iPhone 5S running iOS 7.0.4; the "broken" JS Bin example works fine.
What version of iOS is your iPad running?

This sounds like iOS Safari's element clickability bug (https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile ), which can be easily worked around at the user level.
At the framework level, the only viable workaround would seem to be something like necolas/normalize.css#371

[hnrch02]

I can reproduce on iOS 8 in the iOS Simulator. Tested with http://jsbin.com/zodobe/1 and http://jsbin.com/yabuku/1.

[cvrebert]

Closing in favor of necolas/normalize.css#379 / necolas/normalize.css#371
In any event, you should add role="button" to the clickable part of your SVG to make your site accessible.