rc.5 [ngClass] is re-rendering on scroll

[rokerkony]

🐞 bug report

Affected Package

Probably related to Ivy?

Is this a regression?

it was not re-rendering in ng8

Description

By using [ngClass] on angular 9...rc.5 the class value is re-rendering all over again when using HostListener and window scroll event.

By using I mean:

  @HostListener('window:scroll', ['$event'])
  public updateVisibility (): void {
    // nothing related to the class, in my demo even empty
  }

It probably kills performance due to the constant changing of the DOM but also we have a component working with images and this behavior makes them reload all over again.

🔬 Minimal Reproduction

I created a video(as gif) to show this error:

also created a gist with 3 files to reproduce it:
https://gist.github.com/rokerkony/dbd4e5f4f5307e38f7e1350755693fca

🌍 Your Environment

Angular Version:

Angular CLI: 9.0.0-rc.5
Node: 12.12.0
OS: darwin x64

Angular: 9.0.0-rc.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.5
@angular-devkit/build-angular     0.900.0-rc.5
@angular-devkit/build-optimizer   0.900.0-rc.5
@angular-devkit/build-webpack     0.900.0-rc.5
@angular-devkit/core              9.0.0-rc.5
@angular-devkit/schematics        9.0.0-rc.5
@ngtools/webpack                  9.0.0-rc.5
@schematics/angular               9.0.0-rc.5
@schematics/update                0.900.0-rc.5
rxjs                              6.5.3
typescript                        3.6.4
webpack                           4.41.2

[pkozlowski-opensource]

Thnx for reporting @rokerkony ! We we've found it independently during the internal testing / benchmarking and working on a fix. I will keep this one open to make sure that the WIP fix takes care of this one. Again, thnx for taking time to report and share a reproduce scenario!

[neofuture]

I am seeing a similar issue but without the need to scroll as its a static spa that is full screen i can see elements jittering in the console constantly.

video below

https://www.youtube.com/watch?v=M8-YHmuasm8

[rodolfojnn]

Same here on Ivy. NgClass constantly repaint the class attribute.

[tonivj5]

Maybe #34307 fixes this?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}