The #scrim overlay displayed in narrow layouts when the drawer is open does not properly cover the [main] element when some its content has a positive z-index.
Expected outcome
The overlay covers entirely the [main] content even if it hosts elements brought further to the front using the z-index property.
Actual outcome
The elements from the [main] content that have a positive z-index appear on top of the #scrim overlay.
Description
The
#scrim
overlay displayed in narrow layouts when the drawer is open does not properly cover the[main]
element when some its content has a positivez-index
.Expected outcome
The overlay covers entirely the
[main]
content even if it hosts elements brought further to the front using thez-index
property.Actual outcome
The elements from the
[main]
content that have a positivez-index
appear on top of the#scrim
overlay.Live Demo
https://jsbin.com/vasihiwovi/edit?html,css,output
Steps to reproduce
paper-drawer-panel
element in the page.main
element in it. A plaindiv
or apaper[-scroll]-header-panel
would do.position: relative; z-index: 1;
styling.