Black hover over list item with checkbox

What MDC Web Version are you using?

1.1.1

What browser(s) is this bug affecting?

Chrome (Chromium) 74.0.3729.61

What OS are you using?

Ubuntu 18.04

What are the steps to reproduce the bug?

1. Go to CodePen with Chrome 74+
2. Hover over items
3. You can see the black hover style

What is the expected behavior?

The background should be transparent.

What is the actual behavior?

The background is black.

Any other information you believe would be useful?

This issue only happens on Chrome 74+. I’m not sure if it’s a bug in Chrome 74+ or not since it’s still in beta, but removing the z-index from this selector fixes the problem:

:not(.mdc-list--non-interactive)>:not(.mdc-list-item--disabled).mdc-list-item::before {
    transition: opacity 15ms linear,background-color 15ms linear;
    z-index: 1;
}

removing “will-change” in this selector fixes this issue too:

:not(.mdc-list--non-interactive)>:not(.mdc-list-item--disabled).mdc-list-item {
    cursor: pointer;
    --mdc-ripple-fg-size: 0;
    --mdc-ripple-left: 0;
    --mdc-ripple-top: 0;
    --mdc-ripple-fg-scale: 1;
    --mdc-ripple-fg-translate-end: 0;
    --mdc-ripple-fg-translate-start: 0;
    -webkit-tap-highlight-color: transparent;
    will-change: transform,opacity;

[MarcosRakesh]

@moog16 v74 is released and i can reproduce too now, was fine before updating.

[jamesmfriedman]

Linking https://github.com/jamesmfriedman/rmwc/issues/458

I did some more poking around to. To confirm some things

• This is an issue that is ONLY affecting Chrome 74. Chrome 73 and below work fine, Edge, Safari, and Firefox are all fine.
• This doesn’t affect all of the places where css vars are used. The only cases I can reproduce are instances where a checkbox is a child.
• Doing ANYTHING that throws the element in question onto the gpu rendering context fixes the issue. Not a great fix, but a temporary solution. The above example of filter does this, as well as transform: translateZ(0) on the :before element where the ripple opacity is declared.

Hope this helps!