Cross-browser modal issue in Safari about dialog-polyfill HOT 6 CLOSED

@Garbee look at @prasadsilva 's comment.

A nice fix is to set them to be position: fixed (why this wasn't part of the spec I have no idea) and fix the related CSS of that. That way they just live in the middle of the screen regardless of viewport and don't care about layout.

from dialog-polyfill.

If I remove the 'bottom: 0" from the css for _dialog_overlay ,the dialog becomes available. But it basically disable the modal functionality, making it like the regular dialog without modal.

I have tested your modal demo in Safari and it works fine. I just can't see what I have missed. Unless the fact that I am running under Backbone JS view environment might have complicated the case. But it works without a hitch under Chrome.

from dialog-polyfill.

I'm running into this too, but I think on my end the issue is related to the following limitation (per README):

They should be a child of or have parents without layout (aka, no position absolute or relative elements)

I'm using react-mdl, and the dialog elements are being created inside the content section of a page that uses layout to support a responsive header and a navbar.

from dialog-polyfill.

I have similar issue with Safari that the modal doesn't close. However hitting the esc key did close the modal.

from dialog-polyfill.

Ah, interesting. I'll take a look at this on Thursday or Friday if I have time. That sounds like a great fix.

from dialog-polyfill.

Closing this as it's related to incorrect use of stacking context. We now warn if you're making a mistake, and also are more permissive, so incorrect usage might still work: #131

from dialog-polyfill.