Skip to content

Commit

Permalink
fix(cdk/scrolling): virtual scroll flickers in zoneless mode.
Browse files Browse the repository at this point in the history
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 angular#29174
  • Loading branch information
jacob-noble committed Sep 23, 2024
1 parent 9b4085c commit d0e3389
Showing 1 changed file with 5 additions and 6 deletions.
11 changes: 5 additions & 6 deletions src/cdk/scrolling/virtual-scroll-viewport.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand Down

0 comments on commit d0e3389

Please sign in to comment.