From d0e3389c7169c656156ed0e1162aea62e8a5b92f Mon Sep 17 00:00:00 2001 From: Jacob Noble Date: Mon, 23 Sep 2024 12:58:43 -0400 Subject: [PATCH] fix(cdk/scrolling): virtual scroll flickers in zoneless mode. When provideExperimentalZonelessChangeDetection is enabled, virtual-scroll-viewport flickers during scroll because the transform operation becomes visible. This fix moves the style transform into the afterNextRender phase to ensure it stays invisible. Fixes #29174 --- src/cdk/scrolling/virtual-scroll-viewport.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/cdk/scrolling/virtual-scroll-viewport.ts b/src/cdk/scrolling/virtual-scroll-viewport.ts index 7f0982f2a1df..bfc057bf9fdf 100644 --- a/src/cdk/scrolling/virtual-scroll-viewport.ts +++ b/src/cdk/scrolling/virtual-scroll-viewport.ts @@ -512,14 +512,13 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On // 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( () => { + // 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; this._isChangeDetectionPending = false; const runAfterChangeDetection = this._runAfterChangeDetection; this._runAfterChangeDetection = [];