bug(FormField): Performance issue with multiple mat-label + outline input on v15.2.1

[inarrr]

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

V14

Description

When using multiple MatFormField appearance="outline" with MatLabel, The page freezes for 2-5 seconds on launch.
This behavior is only for Outline appearance with MatLabel.
All works smoothly without or with Fill appearance.

Reproduction

Steps to reproduce:

1. Create multiple MatFormField (appearance=Outlline) with MatLabel

Expected Behavior

Page init smoothly

Actual Behavior

Page freezes for 2-5 seconds depending on MatFormField number.

Environment

• Angular: 15.2.1
• CDK/Material: 15.2.1
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[amysorto]

I can't reproduce this behavior, can you provide a StackBlitz?

[enrique-lozano]

Same problem here. If I have a few form fields (like 20-30), the rendering time is really large. When the fields are outline:

When the same fields are fill:

[Sboddd]

I'm seeing this same issue on Angular 15.2.9. From the Performance tab, the relevant call stack appears to be:

estimateScrollWidth
getWidth
_refreshOutlineNotchWidth
ngAfterViewInit

The call to estimateScrollWidth adds and removes an element; each of those is triggering a Recompute Styles, which in my app is taking ~500ms. So 1 second per field.

[Sboddd]

Followup: I found a workaround/confounding factor. In my app, the problematic case was a large form spread across multiple tabs in a mat-tab-group; the estimateScrollWidth call only adds/removes elements for things that don't have an offsetParent, which includes things that have a display: none parent or, crucially for my case, elements that aren't added to the DOM yet. And a mat-tab-group by default creates the contents of all tabs, but doesn't add the offscreen elements to the DOM. So switching my tab group to lazy load works around the problem by not creating the offscreen fields at all.

[mmalerba]

This was refactored to call _refreshOutlineNotchWidth based on a ResizeObserver when the size actually changes. That hopefully mitigated the negative performance impact of this, but if its still happening feel free to open a new issue