bug(Sidenav): Sidenav not displayed on production build

[GCSDC]

Reproduction

This issue occurs only on production build, on dev build the sidenav is displayed correctly. It happens both if using ng build --prod and hosting files on a static server or running ng serve --prod directly.

I have created a git repo for reproduction at https://github.com/GCSDC/sidenav-issue

Steps to reproduce (after cloning repo and npm install):

1. Run ng serve --prod
2. Open app on browser
3. Click the 'Toggle' button to toggle sidenav

Expected Behavior

Sidenav contents should be displayed correctly, as it happens on a dev build (using ng build or ng serve):

Actual Behavior

Sidenav contents are not displayed:

Environment

• Angular: dependencies below
• CDK/Material: dependencies below
• Browser(s): Chrome Version 86.0.4240.198 (Official Build) (x86_64) / Safari Version 14.0 (15610.1.28.1.9, 15610)
• Operating System (e.g. Windows, macOS, Ubuntu): macOS Catalina 10.15.7

"dependencies": {
    "@angular/animations": "~11.0.1",
    "@angular/cdk": "^11.0.0",
    "@angular/common": "~11.0.1",
    "@angular/compiler": "~11.0.1",
    "@angular/core": "~11.0.1",
    "@angular/forms": "~11.0.1",
    "@angular/material": "^11.0.0",
    "@angular/platform-browser": "~11.0.1",
    "@angular/platform-browser-dynamic": "~11.0.1",
    "@angular/router": "~11.0.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.2",
    "@angular/cli": "~11.0.2",
    "@angular/compiler-cli": "~11.0.1",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }

[crisbeto]

I'm not completely sure why it happens, but the problem is that the style override here is turned into opacity: 1% in production mode which makes the sidenav invisible. If I had to guess, it could mean that something weird is going on with the CSS minifier, but that's just speculation. What's the context behind changing the opacity?

[GCSDC]

@crisbeto thanks for your help. I added opacity to get kind of a transparency effect, but I was not aware it was causing this issue. I removed it and the sidenav is working fine. Should this issue be close then?

[crisbeto]

This could be something to be fixed by the CLI team since changing the opacity is a totally valid use case.

[alan-agius4]

I'm sorry, but this issue is not caused by Angular CLI.

Kindly follow this issue: cssnano/cssnano#957

As a workaround you can use non percentage based values for opacity between 0-1. Example 0.9

[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.}