Modal triggers on SVG elements don't work on iOS #14710

Closed
ulilicht opened this Issue Oct 1, 2014 · 5 comments

Comments

Projects
None yet
3 participants
@ulilicht

ulilicht commented Oct 1, 2014

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

This comment has been minimized.

Show comment
Hide comment
@ulilicht

ulilicht Oct 1, 2014

(Changed example to JSbin to fix HTML errors)

ulilicht commented Oct 1, 2014

(Changed example to JSbin to fix HTML errors)

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Oct 1, 2014

Member

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

Member

cvrebert commented Oct 1, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Oct 1, 2014

Member

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

Member

cvrebert commented Oct 1, 2014

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

@cvrebert cvrebert changed the title from Modals on SVG-Elements don't work on iOS to Modal triggers on SVG elements don't work on iOS Oct 1, 2014

@hnrch02

This comment has been minimized.

Show comment
Hide comment
@hnrch02

hnrch02 Oct 1, 2014

Member

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

Member

hnrch02 commented Oct 1, 2014

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

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Oct 28, 2014

Member

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.

Member

cvrebert commented Oct 28, 2014

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.

@cvrebert cvrebert closed this Oct 28, 2014

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment