Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug(cdk/scrolling): virtual-scroll flickers during scroll in zoneless mode #29174

Open
1 task
OonihiloO opened this issue Jun 3, 2024 · 5 comments · May be fixed by #29777
Open
1 task

bug(cdk/scrolling): virtual-scroll flickers during scroll in zoneless mode #29174

OonihiloO opened this issue Jun 3, 2024 · 5 comments · May be fixed by #29777
Assignees
@mmalerba
Labels
area: many Area label for issues related to many components P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@OonihiloO
Copy link

OonihiloO commented Jun 3, 2024 •
edited
Loading

Is this a regression?

  • Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

Introduces in v18, as related to zoneless application feature.

Description

When provideExperimentalZonelessChangeDetection is enabled,
virtual-scroll-viewport flickers during scroll because the transform operation becomes visible.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-xwe1bt?file=src%2Fcdk-scroll-component.ts
Steps to reproduce:

  1. Scroll slowly, as with a trackpad, not a mouse wheel
  2. Scrolled elements flickers during scroll: the transform operation is visible to the end user

Expected Behavior

See this StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-xwe1bt?file=src%2Fcdk-scroll-component.ts
It's the same code, but with zone enabled:
Steps to reproduce:

  1. Scroll slowly, as with a trackpad, not a mouse wheel
  2. Scrolled elements don't flicker during scroll: the transform operation is invisible to the end user

Actual Behavior

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-xwe1bt?file=src%2Fcdk-scroll-component.ts
Steps to reproduce:

  1. Scroll slowly, as with a trackpad, not a mouse-wheel
  2. Scrolled elements flickers during scroll: the transform operation is visible to the end user

Environment

Angular CLI: 18.0.2
Node: 18.20.3
Package Manager: npm 10.2.3
OS: linux x64

Angular: 18.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... material, platform-browser

Package Version

@angular-devkit/architect 0.1800.2
@angular-devkit/build-angular 18.0.2
@angular-devkit/core 18.0.2
@angular-devkit/schematics 18.0.2
@angular/cli 18.0.2
@schematics/angular 18.0.2
rxjs 7.8.1
typescript 5.4.5
@OonihiloO OonihiloO added the needs triage This issue needs to be triaged by the team label Jun 3, 2024
@OonihiloO OonihiloO changed the title bug(cdl/scrolling): virtual-scroll flickers during scroll in zoneless mode bug(cdk/scrolling): virtual-scroll flickers during scroll in zoneless mode Jun 3, 2024
This was referenced Jun 3, 2024
Closed
Closed
@andrewseguin andrewseguin added area: many Area label for issues related to many components P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Jun 3, 2024
@Klaster1
Copy link

Any updated on this? Encountered the same behavior in my app, thought this was my fault, but even reducing to the most minimal markup didn't help. Running Angular 18 and zoneless.

@OonihiloO
Copy link
Author

OonihiloO commented Jul 4, 2024 •
edited
Loading

Just to confirm that the issue is sill present in 18.1.0 release.
The reproductions have been updated with the latest versions of the Angular stack.

@xyzmaker1
Copy link

This is also an issue in the latest release (18.2.1). Is there a known workaround for this issue?

@OonihiloO
Copy link
Author

@xyzmaker1 none that I know...
The code to fix this issue seems to have been stabilized in angular (the afterNextRender api), but it seems that zoneless being still experimental, the team has other priority.

@xyzmaker1
Copy link

xyzmaker1 commented Aug 27, 2024 •
edited
Loading

@xyzmaker1 none that I know... The code to fix this issue seems to have been stabilized in angular (the afterNextRender api), but it seems that zoneless being still experimental, the team has other priority.

@OonihiloO - Thanks for the reply. I saw the PR that you pushed to try to resolve this issue: #29173.

I took this as a starting point to test this on my end. If I run the changes that your PR had, I can see that a number of tests fail , but if I only make this change:

  /** Run change detection. */
  private _doChangeDetection() {
    if (this._isDestroyed) {
      return;
    }

    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();
      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 = [];
          for (const fn of runAfterChangeDetection) {
            fn();
          }
        },
        {injector: this._injector},
      );
    });
  }

The tests appear to pass and the scrolling issue appears to be resolved. This solution appears to be fine but I'll admit that this is the first time that I've ever dug into this codebase before so I'm sure there's something incorrect about this approach. This approach is slightly different than yours as I've kept the logic all within one afterNextRender block.

jacob-noble added a commit to jacob-noble/components that referenced this issue Sep 23, 2024
@jacob-noble
fix(cdk/scrolling): virtual scroll flickers in zoneless mode.
d0e3389 
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
@jacob-noble jacob-noble linked a pull request Sep 23, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@mmalerba mmalerba

Labels
area: many Area label for issues related to many components P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
5 participants
@OonihiloO @Klaster1 @xyzmaker1 @mmalerba @andrewseguin