Material: .md-scroll-mask's z-index is above .md-dialog-container's, which prevents interaction

[felixfbecker]

The .md-scoll-mask class, which probably disables scrolling in the parent, has a z-index of 50, while .md-dialog-container has a z-index of 15. This means .md-scroll-mask sits on top of the dialog and prevents any user interaction with the dialog (even closing). This seems to be set dynamically on the element.

The fix is to set z-index: 10 !important; in custom CSS.

[sudeep494]

+1. I ran into this too and and lowering the z-index is work-around i am using too but I encourage the material-design team to fix this issue.

[jtreleaven]

+1, I also have run into this issue!

[abouillon]

I am running into this issue as well on 1.0.5.

I am attempting to work around it in the way suggested, but upon inspecting the markup for the page after opening a dialog I am noticing that there is some inline styling on the div containing the scroll mask. I am not entirely sure where it is coming from at this point.

<div class="md-scroll-mask" style="z-index: 50;" aria-hidden="true"> <div class="md-scroll-mask-bar"></div></div>

Update:
I got it to work using the workaround.

[bertomaniac]

Found the potential cause of this issue at line 194 of https://github.com/angular/material/blob/master/src/core/util/util.js:

function disableElementScroll(element) {
        element = angular.element(element || body)[0];
        var zIndex = 50;
        var scrollMask = angular.element(
          '<div class="md-scroll-mask">' +
          '  <div class="md-scroll-mask-bar"></div>' +
          '</div>').css('z-index', zIndex);
        element.appendChild(scrollMask[0]);

        scrollMask.on('wheel', preventDefault);
        scrollMask.on('touchmove', preventDefault);
        $document.on('keydown', disableKeyNav);

        return function restoreScroll() {
          scrollMask.off('wheel');
          scrollMask.off('touchmove');
          scrollMask[0].parentNode.removeChild(scrollMask[0]);
          $document.off('keydown', disableKeyNav);
          delete $mdUtil.disableScrollAround._enableScrolling;
        };

It seems like the hard-coded style should be re-factored to align with the z-index values in https://github.com/angular/material/blob/master/src/core/style/variables.scss

The bizarre thing is that I'm seeing z-index values for things like md-select that are in the 20s instead of the value listed in variables.scss.

I'm seeing this behavior in 1.0.6

[bertomaniac]

Just to follow up with my comment from yesterday, here are the values I'm seeing when I look at the generated CSS:

md-backdrop {
    transition: opacity .45s;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 14
}

md-backdrop.md-menu-backdrop {
    position: fixed!important;
    z-index: 25
}

md-backdrop.md-select-backdrop {
    z-index: 23;
    transition-duration: 0
}

md-backdrop.md-dialog-backdrop {
    z-index: 21
}

md-backdrop.md-bottom-sheet-backdrop {
    z-index: 19
}

md-backdrop.md-sidenav-backdrop {
    z-index: 16
}

These values don't correspond with the z-index values in variables.scss.

[bertomaniac]

Ok, I tracked this down and it had to do with my gulp build process. We were using cssnano as part of the build and I needed to add .pipe($.cssnano({zindex: false})) to prevent the z-indices from being baselined.

Why zindex: false isn't the default is beyond me. Perhaps it is in later versions.

[opadillaintegrify]

@bertomaniac, THANK YOU! That fix worked for me too. You saved me a lot of time.

[seagomezar]

+1 I found the same issue, and I tried the @bertomaniac solution, just putting {zindex: false} in the cssnano gulp process and thats it. Thank you.

[bradrich]

I believe that this issue can be closed. The disableElementScroll function no longer has a zIndex declared, the scroll mask along with each Material component are properly pulling their z-index values from the variables.scss and the backdrop is simply the component z-index value with 1 subtracted from it.

I have not used the gulp service cssnano before but it is not in the Material gulp processes, so it shouldn't be an issue.

Reference to the disableElementScroll function: https://github.com/angular/material/blob/master/src/core/util/util.js#L220

[felixfbecker]

@bradrich it wasnt an issue with angular material after all :)

[mackelito]

Not an issue in rc4 but in rc.5!(?)