Skip to content

Commit c0638a8

Browse files
committed
perf(material/form-field): resolve scrolling performance issues
MDC was setting `will-change` on a couple of elements which caused significant scrolling performance issues on pages with a lot of form fields. These changes reset the `will-change`, because one of the elements wasn't being animated at all and the other one was only animating `transform` which is hardware-accelerated. Fixes #27249.
1 parent 5c3cbb6 commit c0638a8

File tree

1 file changed

+9
-0
lines changed

1 file changed

+9
-0
lines changed

src/material/form-field/_mdc-text-field-structure-overrides.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,11 @@
2929
// and makes migration from the legacy form-field easier for tests that were depending on
3030
// clicking the label to focus the input.
3131
pointer-events: all;
32+
33+
// MDC sets a will-change on this element, because of the animation. This can cause
34+
// scrolling performance degradation on pages with a lot of form fields so we reset it.
35+
// The animation is on a `transform` which is hardware-accelerated already.
36+
will-change: auto;
3237
}
3338

3439
// Reset the height that MDC sets on native input elements. We cannot rely on their
@@ -56,6 +61,10 @@
5661
.mat-mdc-text-field-wrapper {
5762
height: auto;
5863
flex: auto;
64+
65+
// MDC sets a will-change on this element, despite it not animating. This can cause
66+
// scrolling performance degradation on pages with a lot of form fields so we reset it.
67+
will-change: auto;
5968
}
6069

6170
// The icon prefix/suffix is closer to the edge of the form-field than the infix is in a

0 commit comments

Comments
 (0)