bug(MatRipple): setting custom ripple color hides the container content

[ManadayM]

I want to use custom colors for the ripple effect to match with the container colors. However, I found that setting a custom ripple color hides the content of the container element.

Reproduction

The issue can be reproduced on the official Angular Material example page as well.

Steps to reproduce:

1. Open https://material.angular.io/components/ripple/examples
2. Set color input field's value to #E0F7FA or whatever other color is preferred.
3. Click on the Click me button/div on that page.
4. Observe the "Click me" text disappears during the ripple effect animation duration.

Expected Behavior

It should not hide the container element's content. Worth noting it is not hiding the container element's content when you don't set the custom color.

Possible fix

In the Chrome Dev Tools I added a conditional breakpoint on the following line https://github.com/angular/components/blob/23dfbbb238b29fb3cc2bda680186cf0a9b8c40f1/src/material/core/ripple/ripple-renderer.ts#L133

Then I set ripple.style.zIndex = -1 through console to put the dynamically generated ripple element behind the container element. This fixes the issue and the textual content remains visible during the ripple effect animation.

Submitting this as an issue instead PR as I don't know if this is an ideal/optimal solution. 😊

Environment

• Angular: 12.0.2
• CDK/Material: 12.0.2
• Browser(s): Chrome, Brave
• Operating System (e.g. Windows, macOS, Ubuntu): macOS Catalina, Android 10

[crisbeto]

This is working as expected. You should set an rgba color with an alpha value. E.g. rgba(255, 0, 0, 0.5).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}