Performance issue in Angular 15/16 Form Fields

[Krantiveer007]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

Getting performance issue in Angular 15/16 post mdc migration. It's happening on other browsers as well but is more clear on Chrome(Version 113.0.5672.126 (Official Build) (x86_64)).

I have a page full of form fields (using material inputs, autocomplete, mat select, checkboxes etc).

While scrolling and some times intermittently the form fields repaints. It's only happening with Form Fields. Tried replicating same in stackblitz and it's happening for a simple input field as well, if the number of fields exeeds say 60-70. Same thing was working fine with Angular 13/14 with even 1000 input fields added.
Here is the stackblitz instance for Angular 15:

Code base: https://stackblitz.com/edit/angular-ivy-qayt3s?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fmain.ts,src%2Fapp%2Fapp.component.css
App URL: https://angular-ivy-qayt3s.stackblitz.io/
Here is the stackblitz instance for Angular 13:

Code base: https://stackblitz.com/edit/angular-material-13-starter-x1xj4z-yyhktq?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts,src%2Findex.html 2.** App URL**: https://angular-material-13-starter-x1xj4z-yyhktq.stackblitz.io/
Let me know incase anyone else facing this and has a resolution.

Please provide a link to a minimal reproduction of the bug

https://angular-ivy-qayt3s.stackblitz.io/

Please provide the exception or error you saw

Code base: https://stackblitz.com/edit/angular-ivy-qayt3s?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts,src%2Fmain.ts,src%2Fapp%2Fapp.component.css
App URL: https://angular-ivy-qayt3s.stackblitz.io/

Please provide the environment you discovered this bug in (run ng version)

{
  "name": "angular",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "dependencies": {
    "@angular/animations": "^15.0.2",
    "@angular/common": "^15.0.2",
    "@angular/compiler": "^15.0.2",
    "@angular/core": "^15.0.2",
    "@angular/forms": "^15.0.2",
    "@angular/platform-browser": "^15.0.2",
    "@angular/platform-browser-dynamic": "^15.0.2",
    "@angular/router": "^15.0.2",
    "rxjs": "^7.5.7",
    "tslib": "^2.4.1",
    "zone.js": "^0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.0",
    "@angular/cli": "~14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.7.2"
  }
}

Anything else?

No response

[enrique-lozano]

Surely duplicate of #26792

[Krantiveer007]

@crisbeto Thanks for finding the issue, can you please give an estimated idea by patch will be merged and which version will it be available in?

[crisbeto]

It may take a while to land the fix, because it causes some rendering differences which break a lot of our internal screenshot tests. It should be in one of the 16.x patch releases. If this is a blocker for you, you can add this to your global styles:

.mat-mdc-form-field .mat-mdc-text-field-wrapper, 
.mat-mdc-form-field .mdc-floating-label {
  will-change: auto;
}

[Krantiveer007]

Yes, it was a blocker. Thanks for helping.