Skip to content

Commit 4a22bb4

Browse files
committed
fix(cdk/scrolling): Move setting transform outside afterNextRender
1 parent f8c0b8d commit 4a22bb4

File tree

1 file changed

+11
-10
lines changed

1 file changed

+11
-10
lines changed

src/cdk/scrolling/virtual-scroll-viewport.ts

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -496,11 +496,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
496496
// properties sequentially we only have to run `_doChangeDetection` once at the end.
497497
if (!this._isChangeDetectionPending) {
498498
this._isChangeDetectionPending = true;
499-
this.ngZone.runOutsideAngular(() =>
500-
Promise.resolve().then(() => {
501-
this._doChangeDetection();
502-
}),
503-
);
499+
this.ngZone.runOutsideAngular(() => queueMicrotask(() => this._doChangeDetection()));
504500
}
505501
}
506502

@@ -511,15 +507,20 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
511507
}
512508

513509
this.ngZone.run(() => {
510+
// Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection
511+
// from the root, since the repeated items are content projected in. Calling `detectChanges`
512+
// instead does not properly check the projected content.
514513
this._changeDetectorRef.markForCheck();
514+
515+
// Apply the content transform. The transform can't be set via an Angular binding because
516+
// bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
517+
// string literals, a variable that can only be 'X' or 'Y', and user input that is run through
518+
// the `Number` function first to coerce it to a numeric value.
519+
this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
520+
515521
afterNextRender(
516522
() => {
517523
this._isChangeDetectionPending = false;
518-
// Apply the content transform. The transform can't be set via an Angular binding because
519-
// bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
520-
// string literals, a variable that can only be 'X' or 'Y', and user input that is run through
521-
// the `Number` function first to coerce it to a numeric value.
522-
this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
523524
const runAfterChangeDetection = this._runAfterChangeDetection;
524525
this._runAfterChangeDetection = [];
525526
for (const fn of runAfterChangeDetection) {

0 commit comments

Comments
 (0)