Starter app is janky after adding Angular Material

[andrewseguin]

🐞 Bug report

Command

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes

Description

A newly generated application using ng new will have several UI issues once you install ng add @angular/material.

This is because Angular Material will add the following styles to the global stylesheet:

html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

This causes an issue with the header, which has margin: -8px since it assumes the body has margin: 8px.

Once Angular Material adds it's boilerplate styles, the page exhibits wild scrolling jank whenever you hover over any button on the page.

🔬 Minimal Reproduction

ng new my-example-app
cd my-example-app
ng add @angular/material
ng serve

🌍 Your Environment

Angular CLI: 9.0.2
Node: 12.14.1
OS: linux x64

Angular: 9.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... routerIvy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.2
@angular-devkit/build-angular     0.900.2
@angular-devkit/build-optimizer   0.900.2
@angular-devkit/build-webpack     0.900.2
@angular-devkit/core              9.0.2
@angular-devkit/schematics        9.0.2
@angular/cdk                      9.0.0
@angular/cli                      9.0.2
@angular/material                 9.0.0
@ngtools/webpack                  9.0.2
@schematics/angular               9.0.2
@schematics/update                0.900.2
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

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