bug(mat-form-field): extra lines are shown on scroll for outlined form field labels
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### 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:
https://github.com/user-attachments/assets/bbd009f0-8a9c-4f6e-955b-e0cec6b095e5
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
Contributor guide
Research direction
Start with the linked StackBlitz reproduction, especially src/form-field-example/form-field-example.ts, src/form-field-example/form-field-example.html, src/main.ts, src/material-module.ts, and src/index.html. Reproduce the artifact while dragging the mat-card scrollbar in Edge and compare the outlined form-field behavior across browsers. Done means the label-length lines no longer appear while scrolling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100