Increase z-index for md-dialog scrim

[summersz]

The z-index is currently 1. Selected tabs in md-tab component also have z-index 1 and do not get covered by the md-dialog scrim.

[ismartcoding]

Better update the code so we can customize the z-index.

<div class="scrim" part="scrim"></div>

[asyncliz]

Do you mind putting together a lit.dev/playground to showcase the problem?

[summersz]

Sure! https://lit.dev/playground/#gist=7e423c837e3011843c7f1d1d05062614

It looks like it depends on the order of the html, if the dialog is before the tabs it has the issue, but after it is okay.

[asyncliz]

Thanks for the repro and the workaround!

[BrentonJScott]

Any progress on this?

[asyncliz]

Design has split the concept of a "scrim" out into a separate component. I think it'd be good to solve it that way and use a <md-scrim part="scrim"> inside the dialog for better customization.

No progress on it yet, it's not on our roadmap for Q4.

[aarondrabeck]

This bug is quite prevalent when building an app with these components. I hope to see a resolution soon.

Any reason they native scrim wasn't used? Seems like that would solve the issues here because it would be in TopLayer and not have zindex problems.

Here is the hack we use until if it helps anyone:

export function dialogZIndexHack(dialog: MdDialog) {
  if (dialog.shadowRoot) {
    const scrim = dialog.shadowRoot.querySelector<HTMLElement>('.scrim');
    if (scrim) {
      scrim.style.zIndex = '99';
    }
  }
}

[asyncliz]

I believe the reason we're not using the ::backdrop element is because Firefox didn't support animating it.

It may be better to swap to using it to avoid these problems and just not have the dialog animate its scrim on Firefox.

[ciukstar]

My temporary solution was to set the z-index of md-tabs to z-index: 0. Anyway, I want to ask why the z-index of tabs is set to 1?

(... I'm guessing the same issue will happen with md-tabs and Navigation drawer.)

[mai1202]

I've also encountered this problem, but it's still not resolved. I suppose that we can set a token to control its z-index.