Black hover over list item with checkbox

[mohammadrafigh]

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;

[moog16]

I'm on version 73.0.3683.103 and cannot confirm this is happening. I will need to track another Linux machine down for Chrome 74.x.

[moog16]

v74 is still in Beta...if this is still an issue when v74 is out of beta. Please ping/reopen the issue. Thank you!

https://chromereleases.googleblog.com/2019/04/beta-channel-update-for-desktop_22.html

[MarcosRakesh]

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

[ghost]

@moog16 Can confirm that this is still a problem, Chrome just updated and now shows the black flashes. It's not specific to the checkboxes either, as I also get this problem when clicking on buttons inside a list (for menu's). Please feel free to mention me if you need any further information.

[anirban09]

@moog16 Also, if it helps, this isn't specific to Linux, I see the same problem on Windows and macOS...

You can see the bug in action by playing around with the List with Trailing Checkbox demo itself:
https://material-components.github.io/material-components-web-catalog/#/component/list

[moog16]

Ok reopening!

[lionar]

I have this issue too. I added the following style rule to fix it:

:not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item:hover::before {
    filter: opacity(100%);
}

[laiseng]

this bug also happens to Edge Canary build 76.0.144.0 (Official build) canary (64-bit) .
looks like chromium issue

[laiseng]

this bug also happens to Android Version of Chrome v74.0.3729.112
a video of the bug in action when touching checkbox in mdc-list
https://drive.google.com/open?id=1YkegpX-uxGgtpRe7MZ4SckAn0T4CWaTM

[kristjanpikk]

Seems to impact ".mdc-list-item" and ".mdc-card__primary-action" hover and active states for Chrome.

[rsouthgate]

This looks related to will-change css property (or at least turning that property off reverts behaviour to chrome 73 - but at the expense of not optimizing any changes).

But I can't find anything on blink/chromium that owuld explain why...

[cintaccs]

#4690 still an issue with latest Chrome and latest 2.1.0 version.
It doesn't seems to be an issue on Firefox - maybe some hardware acceleration issue in Chrome...?

[jamesmfriedman]

Linking rmwc/rmwc#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!

[abhiomkar]

I spent sometime investigating this issue. Removing will-change CSS property from mdc-ripple (MDC List ripple & MDC Checkbox ripple) seems to be solving this problem. I didn't notice any drastic performance changes with & without will-change CSS property.

• Prototype: with will-change - Current Behaviour
• Prototype: without will-change

As per documentation from MDN & other resources:

Don't apply will-change to too many elements. The browser already tries as hard as it can to optimize everything. Some of the stronger optimizations that are likely to be tied to will-change end up using a lot of a machine’s resources, and when overused like this can cause the page to slow down or consume a lot of resources. (MDN will-change)

Use sparingly...

Don't apply will-change to elements to perform premature optimization...

Warning: Do not promote elements unnecessarily. (Ref)

IMO, I'm not sure if it is a good idea to use will-change to many DOM elements, setting it to elements anticipating performance degradation is premature optimization.

[moog16]

@abhiomkar RE will-change: I think its a good idea to add that to the best-practices doc.

[yufangfred]

Not only checkbox, Radio in List also produce similar issue.
:not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item:hover::before {
filter: opacity(100%);
}
Solves both for me.

[abhiomkar]

Update: This bug is reported to Chrome browser team and fix will be launched in upcoming Chrome version.

https://bugs.chromium.org/p/chromium/issues/detail?id=974289