Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Angular 9 Backward Compatibility for CSS Grids in IE 11 #17041

Closed
srajkumarms opened this issue Feb 21, 2020 · 3 comments · Fixed by #17045
Closed

Angular 9 Backward Compatibility for CSS Grids in IE 11 #17041

srajkumarms opened this issue Feb 21, 2020 · 3 comments · Fixed by #17045
Assignees
@alan-agius4
Labels
area: devkit/build-angular freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Milestone
Backlog

Comments

@srajkumarms
Copy link

🐞 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.
IE11_CSS_Grids

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?
@pkozlowski-opensource pkozlowski-opensource transferred this issue from angular/angular Feb 21, 2020
@ngbot ngbot bot added this to the needsTriage milestone Feb 21, 2020
@alan-agius4 alan-agius4 added freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix labels Feb 21, 2020
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Feb 21, 2020
@alan-agius4 alan-agius4 self-assigned this Feb 21, 2020
@alan-agius4 alan-agius4 mentioned this issue Feb 21, 2020
Merged
@alan-agius4
Copy link
Collaborator

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

@srajkumarms
Copy link
Author

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

dgp1130 pushed a commit that referenced this issue Feb 24, 2020
@alan-agius4 @dgp1130
fix(@angular-devkit/build-angular): fix autoprefixer comments support…
d29d403 
… in scss

Change Scss output style to `expanded` as otherwise sass will remove comments that are needed for autoprefixer when webpack is in prod mode because of the following implementation in `sass-loader`:
See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70

Fixes #17041
dgp1130 pushed a commit that referenced this issue Feb 24, 2020
@alan-agius4 @dgp1130
fix(@angular-devkit/build-angular): fix autoprefixer comments support…
b277030 
… in scss

Change Scss output style to `expanded` as otherwise sass will remove comments that are needed for autoprefixer when webpack is in prod mode because of the following implementation in `sass-loader`:
See: https://github.com/webpack-contrib/sass-loader/blob/45ad0be17264ceada5f0b4fb87e9357abe85c4ff/src/getSassOptions.js#L68-L70

Fixes #17041

(cherry picked from commit d29d403)
This was referenced Mar 21, 2020
Merged
Merged
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Mar 26, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@alan-agius4 alan-agius4

Labels
area: devkit/build-angular freq1: low Only reported by a handful of users who observe it rarely severity5: regression type: bug/fix
Projects
None yet
Milestone
Backlog
Development

Successfully merging a pull request may close this issue.

fix(@angular-devkit/build-angular): fix autoprefixer comments support in scss
2 participants
@srajkumarms @alan-agius4