Skip to content

Commit

Permalink
fix(cdk/scrolling): Move setting transform outside afterNextRender
Browse files Browse the repository at this point in the history
  • Loading branch information
mmalerba committed Apr 29, 2024
1 parent f8c0b8d commit 4a22bb4
Showing 1 changed file with 11 additions and 10 deletions.
21 changes: 11 additions & 10 deletions src/cdk/scrolling/virtual-scroll-viewport.ts
Original file line number Diff line number Diff line change
Expand Up @@ -496,11 +496,7 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
// properties sequentially we only have to run `_doChangeDetection` once at the end.
if (!this._isChangeDetectionPending) {
this._isChangeDetectionPending = true;
this.ngZone.runOutsideAngular(() =>
Promise.resolve().then(() => {
this._doChangeDetection();
}),
);
this.ngZone.runOutsideAngular(() => queueMicrotask(() => this._doChangeDetection()));
}
}

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

this.ngZone.run(() => {
// Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection
// from the root, since the repeated items are content projected in. Calling `detectChanges`
// instead does not properly check the projected content.
this._changeDetectorRef.markForCheck();

// Apply the content transform. The transform can't be set via an Angular binding because
// bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
// string literals, a variable that can only be 'X' or 'Y', and user input that is run through
// the `Number` function first to coerce it to a numeric value.
this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;

afterNextRender(
() => {
this._isChangeDetectionPending = false;
// Apply the content transform. The transform can't be set via an Angular binding because
// bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
// string literals, a variable that can only be 'X' or 'Y', and user input that is run through
// the `Number` function first to coerce it to a numeric value.
this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
const runAfterChangeDetection = this._runAfterChangeDetection;
this._runAfterChangeDetection = [];
for (const fn of runAfterChangeDetection) {
Expand Down

0 comments on commit 4a22bb4

Please sign in to comment.