angular / angular/components

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

Offen
#31,525 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: material/form-field P3
Vorherrschende Sprache
TypeScript
Sterne
25k
Forks
6.8k
Ø Merge
1 T. 8 Std.
Gemergte PRs (30 T.)
91

Beschreibung

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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit der verknüpften StackBlitz-Reproduktion, insbesondere mit src/form-field-example/form-field-example.ts, src/form-field-example/form-field-example.html, src/main.ts, src/material-module.ts und src/index.html. Reproduziere das Artefakt, während du in Edge den mat-card-Scrollbalken ziehst, und vergleiche das Verhalten des outlined form-field in den verschiedenen Browsern. Erledigt ist die Aufgabe, wenn beim Scrollen keine Linien mit der Länge des Labels mehr erscheinen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
frontend
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.