search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.28k stars 6.71k forks source link

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

Open OonihiloO opened 2 months ago

OonihiloO commented 2 months ago

Is this a regression?

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

Klaster1 commented 2 months ago

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 commented 1 month ago

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.