Shifting scroll items only when @ViewChild Element is referenced in a child component.

🐞 bug report

Affected Package

@angular/core

Is this a regression?

No. This issue has been noted in Angular 8.0.0, 8.2.14, and 9.0.0-rc.1.

Description

In a DIY virtual scroll component, when a @ViewChild ElementRef is accessed in a component of the *ngFor loop the scroll items shift positions.

<div *ngFor="let item of list; trackBy: itemId;" class="item" [ngClass]="{'gray': item.id % 2}" [style.height.px]="itemHeight"> <ui-test [data]="item" [length]="_list.length"></ui-test> </div>

Referencing this line in the ui-test component does not create the bug. @ViewChild(‘btn’, { static: false }) btn: ElementRef;

Referencing this line in the ui-test component does not create the bug. this.btn.nativeElement;

As soon as a property of nativeElement it referenced in the ui-test component, the bug is visible. this.btn.nativeElement.offsetHeight;

Depending on the @ViewChild static setting, the bug changes.

When @ViewChild(‘btn’, { static: true }) btn: ElementRef; and in ngOnInit() this.btn.nativeElement.offsetHeight; When scrolling, the shift occurs often.

When @ViewChild(‘btn’, { static: false }) btn: ElementRef; and in ngAfterViewInit() this.btn.nativeElement.offsetHeight; When scrolling, the shift occurs only once and only after the transform: translateY offsetY is changed. In the the test case this is when the first two items of the scroll viewport have moved out of view.

🔬 Minimal Reproduction

Example: Angular 8 Example: Angular 9

🔥 Exception or Error

No error noted.

🌍 Your Environment

Angular Version:

Angular CLI: 8.3.23
Node: 13.8.0
OS: darwin x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.803.23
@angular-devkit/build-angular      0.803.26
@angular-devkit/build-ng-packagr   0.803.26
@angular-devkit/build-optimizer    0.803.26
@angular-devkit/build-webpack      0.803.26
@angular-devkit/core               8.3.23
@angular-devkit/schematics         8.3.23
@angular/cdk                       8.2.3
@angular/cli                       8.3.23
@angular/flex-layout               8.0.0-beta.27
@angular/material                  8.2.3
@angular/material-moment-adapter   8.2.3
@ngtools/webpack                   8.3.26
@schematics/angular                8.3.23
@schematics/update                 0.803.23
ng-packagr                         5.7.1
rxjs                               6.5.5
typescript                         3.5.3
webpack                            4.39.2

Anything else relevant?

Bug is present in Chrome Browser Version 80.0.3987.163 (Official Build) (64-bit)

Bug not present in Safari Browser Version 13.1 (15609.1.20.111.8) iPhone Safari iPhone Chrome Browser

[pkozlowski-opensource]

@refactorking thnx for sharing a reproduce scenario in a stackblitz. I had a brief look at it and unfortunately it is not clear to me what is the problem in Angular you are trying to report… I do understand that something is not rendered as you would expect, but it is not obvious to me what part of “not working” is contributed by Angular.

It sounds to me like you bumping into some timing issues and things happen not in order you would expect. It further sounds to me like you might be dealing with browser reflow issues (this would be suggested by the fact that reading offsetHeight plays a role).

Could I ask you to reduce the scenario in stackblitz to the absolute minimum necessary to illustrate the issue in Angular? The reproduction scenario, as it stands right now, is rather hard for us to dive into. As such it will greatly delay investigations. The best way of getting fast feedback is to simplify the reproduce scenario . Thank you for your understanding!

[angular-automatic-lock-bot[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.}