bug(mat-form-field): extra lines are shown on scroll for outlined form field labels

[kinleyking]

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

This behavior is seen when a form field is in a vertically scrollable mat-card. When scrolled to certain positions, there's extra lines shown at the top and bottom of the form field. The length of the lines matches the length of the label, and it seems like it could be related to the "will-change: auto;" property being set since it disappears when that's deselected in devtools. This behavior is seen when scrolling with the mouse but is more reproducible when dragging the scroll bar.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-6huqgdmq?file=src%2Fform-field-example%2Fform-field-example.ts,src%2Fform-field-example%2Fform-field-example.html,src%2Fmain.ts,src%2Fmaterial-module.ts,src%2Findex.html

Recording:

20250711-1848-33.5447366.mp4

Steps to reproduce:

1. Ensure no form fields are selected
2. Click & slowly drag the vertical scroll on the mat-card

Note: This is observed most frequently on Microsoft Edge.

Expected Behavior

I expect the form fields to not change their appearance while scrolling

Actual Behavior

The form fields are showing a line the length of the label at the top and bottom of the outlined form field.

Environment

• Angular: 19.x
• CDK/Material: 19.2.19
• Browser(s):
  • Microsoft Edge: Version 137.0.3296.93 (Official build) (64-bit)
  • Chrome version: 137.0.7151.120 (Official Build) (64-bit)
  • Firefox version: 140.0 (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[mmalerba]

Seems worth a try to see if removing will-change improves this situation. The property was applied a little over-zealously in the past by MDC.