bug(mat-form-field): changes appearance with box-sizing: border-box

[cotneit]

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

No response

Description

A lot of apps (notably the ones using Tailwind) use * {box-sizing: border-box; } to default box-sizing to border-box. This causes top outline on focused mat-form-field with appearance="outline" to change appearance around the label when it's floating. It doesn't change much but enough to feel that something's off because the upper-left bit becomes shorter.

I assume material is "border-box friendly" because I saw a few similar resolved issues while looking if this has been reported

Reproduction

Steps to reproduce:

1. Use * {box-sizing: border-box; }
2. Use mat-form-field with appearance="outline"

https://stackblitz.com/edit/components-issue-jksnnz?file=src/styles.scss

Expected Behavior

Appearance doesn't change

Actual Behavior

Appearance changes

Environment

• Angular: 14.1.3
• CDK/Material: 14.1.3
• Browser(s): Chrome 106.0.5249.91
• Operating System (e.g. Windows, macOS, Ubuntu): Windows