bug(matInput): matInput with type "date" has incorrect height

[ilyakonrad]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14

Description

matInput with appearance "outline" with type "date" has hardcoded height of 16px, which combining with font-size of 16px results in cropping of letters.

Reproduction

https://stackblitz.com/edit/xv3jy5?file=src%2Fexample%2Fform-field-appearance-example.html,src%2Fexample%2Fform-field-appearance-example.ts

Expected Behavior

Nothing should be cropped.

Actual Behavior

Empty input element text gets cropped.

Environment

Angular CLI: 15.2.9
Node: 18.12.0
Package Manager: yarn 1.22.19
OS: win32 x64

Angular: 15.2.9
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

Package Version

@angular-devkit/architect 0.1502.9
@angular-devkit/build-angular 15.2.9
@angular-devkit/core 15.2.9
@angular-devkit/schematics 15.2.9
@angular/fire 7.5.0
@schematics/angular 15.2.9
rxjs 7.8.0
typescript 4.8.4
webpack 5.76.0

[mistrykaran91]

This issue exists because of margin-bottom:-2px when I remove this it works as expected.

@crisbeto any way we can run this block of stylings only for safari. I see online there are some ways we can only this one for specific browser only.