Angular 9 Backward Compatibility for CSS Grids in IE 11

[srajkumarms]

🐞 bug report

Affected Package

Backward Compatibility for CSS Grids in IE 11

Is this a regression?

Yes, It wasn't an issue in Angular 8

Description

I have an Angular 8 application which uses CSS Grids. It was compatible with IE 11, Chrome 79+ and Mozilla Firefox 70+.

Recently upgraded the app to Angular 9.
I have set browserslist to include IE 9-11, and had turned on autoprefixer in the component's scss file like /* autoprefixer grid: autoplace */ as suggested in [Angular Documentation](Angular 9 Backward Compatibility for CSS Grids in IE 11).

When built in prod mode using ng build --prod vendor prefixes were not generated for IE 11.

But, when I added a configuration for es5 and served with ng serve --configuration es5 vendor prefixes were generated and application was rendered exactly as in Chrome.

🔬 Minimal Reproduction

https://github.com/srajkumarms/ie11-grid-support

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.3
Node: 10.15.3
OS: darwin x64

Angular: 9.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.3
@angular-devkit/build-angular     0.900.3
@angular-devkit/build-optimizer   0.900.3
@angular-devkit/build-webpack     0.900.3
@angular-devkit/core              9.0.3
@angular-devkit/schematics        9.0.3
@angular/cli                      9.0.3
@ngtools/webpack                  9.0.3
@schematics/angular               9.0.3
@schematics/update                0.900.3
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Anything else relevant?

[alan-agius4]

As a workaround you can use the following comment instead /*! autoprefixer grid: autoplace */

[srajkumarms]

Thanks @alan-agius4 ! That was pretty quick.
Workaround works as expected. Once the patch is released, I will switch to original fix.

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