modal paper-dialog wrongly shown when inside a drawer

[kungufli]

If you have a modal paper-dialog inside the drawer of a paper-drawer-panel, when the drawer is in narrow state the dialog is shown under the overlay:

The overlay is correct if the drawer is not narrow:

Also, note that the paper-dialog sizing is wrong when the drawer is narrow.
Obviously this can be solved by moving the paper-dialog tag outside of the drawer, but this is still a bug, in my opinion, because there are cases when this complicates the code, for example if you need to use paper-dialog inside an element that should be positioned in the drawer.

[jesusabarca]

I'm having the same issue. I tried placing the <paper-dialog modal></paper-dialog> element in different places, but I'm having the same behavior. On a desktop is not a big deal, but in a mobile device, it gets lost on the edges of the screen.

[kungufli]

An interesting detail: this bug is present in latest versions of Chrome (46.0.2490.71) and Firefox (41.0.2), but the dialog works normally in Microsoft Edge and IE (tested on 11 and 10).

[ronnyroeller]

+1

[jpodwys]

+1

[jshcrowthe]

Any updates on this?

[valdrinkoshi]

This is not caused by the paper-dialog, but by the way overlays are handled in iron-overlay-behavior; the backdrop is always added to body and it's shared between overlays. The fact that you insert the dialog in another branch of the DOM tree causes issues with the z-index system.
There is a proposal PR that fixes this, but potentially introduces other issues related to css selectors (breaking change).

In the meantime, consider moving your paper-dialog outside the paper-drawer-panel.
Ideally overlays should be children of body (since they'll always show on top of everything else).

[valdrinkoshi]

After further debugging, i discovered that the css property will-change: transform is causing the issue. Will move it to the right repo

[valdrinkoshi]

This issue was moved to PolymerElements/paper-drawer-panel#122
Will handle it here

[valdrinkoshi]

This issue is caused by the way stacking contexts work, and is a known limitation of iron-overlay-behavior.

tl;dr All overlays implementing iron-overlay-behavior (e.g. paper-dialog) with backdrop should be added in the same stacking context of body (because iron-overlay-backdrop is appended there).

In this specific case, the css property will-change: transform; used by paper-drawer-panel causes a new stacking context to be created.
@kungufli, you noticed that on IE it was working fine, that's because will-change is not supported yet http://caniuse.com/#search=will-change
There are many other css properties that create a new stacking context (here more details), so it's up to the user to take care of this.
See this example to see the implications of stacking contexts: http://jsbin.com/coxobi/4/edit?html,output

[kungufli]

@valdrinkoshi ok, now it's clear to me what's happening. Many thanks for the time spent to investigate on that.

[johncvieira]

+1

[punkratz312]

I see many many closing tags, but the issue it still active for me...