angular / angular/components

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

Aperta
#31,525 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
area: material/form-field P3
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.

Image

Image

### 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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.