polymer or mwc element rendered through app-drawer

[gdevacc12]

Description: With @polymer/app-layout@3.0.2 (with app-layout/app-drawer, when using polymer input elements (or MWC) on views that should appear hidden by the drawer the component renders on top of the drawer.

Expected outcome: The drawer appears on top of the the views (e.g. my-view1) masking the underlying view.

Actual outcome: The input components on a view bleed though to the drawer.

Steps to reproduce: Start with the pwa-starter-kit. npm install for example @polymer/paper-input (@polymer/paper-input@3.0.2) add paper-input to my-view1 so it should be masked by the drawer in narrow view Show the drawer

Browsers Affected:

• [x] Chrome (76.0.3809.132)
• [x] Firefox (68.0.2)
• [?] Safari 9 untested
• [?] Safari 8 untested
• [?] Safari 7 untested
• [x] Edge (78.0.249.1)
• [?] IE 11 untested
• [?] IE 10 untested
• [x] Opera (62.0.3331.116)

[gdevacc12]

A work around is to add the following style to the element importing app-drawer. app-drawer { z-index: 1; }

This worked with app-layout 3.1.0.

[e111077]

Hello, I've added a default z index which should solve this for the default case. Will do a release soon.