Dialog's overlay stacks over dialog

[guilhermependezza]

The contents of dialog was inaccessible because dialog's overlay were on top dialog and by passing z-index rules.

The solution I've used to get the dialog working was add a display block to _dialog_overlay class.

I'm running this on Firefox 49.0

[samthor]

I'm confused. The overlay should be behind the dialog, even in your example: the overlay has z-index 100000, and the dialog has 100002.

[tartinesKiller]

Same problem here, with Firefox 50. Using Chrome, no problem.

[samthor]

@tartinesKiller can you try the version at HEAD?

Also, see my earlier comment. The overlay with z-index 100k is smaller than 100k + 2.

(Chrome is moot: it has native dialog support).

[samthor]

& is the dialog a child of something with its own stacking context?

[tartinesKiller]

Does not change anything, same problem. Yes, I know, and that's why it driving me mad, that's not supposed to occur I'm using Material Design Lite, but it doesn't seems to have any z-index superior to 100k.

When trying the codepen here : http://codepen.io/Garbee/full/EPoaMj/, it just works. Maybe it's a problem with mdl ?

[vladimir-s]

@tartinesKiller Same problem. But this is not a problem with mdl. If you move the dialog tag to the same DOM tree level as the overlay, the problem will be fixed.

[manico]

There is a similar problem in Chrome (native dialog) as it is not possible to place anything above dialog. See this example with recaptcha: https://s30.postimg.org/lz5wao3z5/recaptcha.png

Is there a solution for this?

[samthor]

@manico Dialog is in the top layer, so in the native implementation, it should be impossible to place things above it. In the polyfill, it's possible but not suggested.

[samthor]

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