MDC Switch knob rendered above the toolbar

[stasson]

MDC Switch knob rendered above the toolbar

Hello MDC Team, I'm submitting this bug in the context of this project stasson/vue-mdc-adapter. I'm trying to implement Vue adapters of MDC ( foundation way)

When I scroll down a page containing a Fixed toolbar and a MDC Switch, the switch knob stays above the toolbar. See the project preview

What MDC-Web Version are you using?

@material/[email protected]
@material/[email protected]

What browser(s) is this bug affecting?

Chrome Version 58.0.3029.110 (64-bit)

What OS are you using?

Windows 10 pro

What are the steps to reproduce the bug?

1. open the preview
2. scroll down until you see the switch element
3. scroll so that the switch is masked by the toobar

I'll try to write a template on CodePen if you think it'll help more

What is the expected behavior?

I would expect the knob to not be seen when positioned under the toolbar

What is the actual behavior?

the switch nob is not masked by the toolbar

Any other information you believe would be useful?

I guess could fix it in my CSS but thought it may be something you guys may want to know.

[traviskaufman]

Thanks for filing @stasson! This is definitely a bug. We've had multiple issues like this as a result of elevation not being intrinsically mapped to z-indices. We're long-term addressing this problem in #769.

However, as a short-term fix, the toolbar's elevation is set to a depth of 4, so we could simply change the z-index for fixed toolbars from 1 to 4 to correct for this.