bug(mat-form-field): extra lines are shown on scroll for outlined form field labels
- Lingua principale
- TypeScript
- Stelle
- 25k
- Fork
- 6.8k
- Merge medio
- 1g 8h
- PR unite (30g)
- 91
Descrizione
### 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
Guida per i contributori
Apri la guida per i contributori
Direzione di ricerca
Inizia dalla riproduzione StackBlitz collegata, in particolare src/form-field-example/form-field-example.ts, src/form-field-example/form-field-example.html, src/main.ts, src/material-module.ts e src/index.html. Riproduci l’anomalia mentre trascini la barra di scorrimento di mat-card in Edge e confronta il comportamento dell’outlined form-field tra i browser. Il lavoro è completato quando le linee della lunghezza del label non compaiono più durante lo scorrimento.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- angular, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 4/5
- Tempo stimato
- 3-5 giorni
- Stato di attività
- Ferma
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 38/100