Angular Material fails to render properly in some browsers

[ryndm]

Reproduction

StackBlitz demo - https://angular-ivy-bjdkdj.stackblitz.io
StackBlitz Editable - https://stackblitz.com/edit/angular-ivy-bjdkdj?file=src/app/app.component.ts

Steps to reproduce:

1. I have used mat-card in my component. Checkout the Stackblitz demo.
2. Doesn't work on edge and some versions of chrome.

Expected Behavior

It should render the mat-card layout and color properly

Actual Behavior

Some portion of screen is grey

Environment

"@agm/core": "^1.0.0-beta.5",
"@angular-devkit/core": "7.0.2",
"@angular/animations": "^7.0.0",
"@angular/cdk": "^7.0.0",
"@angular/common": "7.0.0",
"@angular/compiler": "7.0.0",
"@angular/core": "7.0.0",
"@angular/flex-layout": "7.0.0-beta.19",
"@angular/material": "^7.0.0",
"@angular/material-moment-adapter": "^7.0.0",
"@angular/platform-browser": "7.0.0",
"@angular/platform-browser-dynamic": "7.0.0",

• Browser(s): Chrome, Edge
• Operating System: Windows

[crisbeto]

It seems like you're hitting some sort of browser bug due to the two hex colors with opacity values on .meter-log-fieldset. You should be able to work around it by changing the color to a solid hex color or an rgba one (see https://stackblitz.com/edit/angular-ivy-xdev6z?file=src%2Fapp%2Fapp.component.scss).

I'm closing the issue, because this is a browser bug and we can't do much about it.

[ryndm]

Yea this started happening after I updated my chrome version to Version 87.0.4280.66. Before that it was working fine. Anyways thanks for replying.

[angular-automatic-lock-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.}