-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Is this a regression?
- Yes, this behavior used to work in the previous versionTo pick up a draggable item, press the space bar. While dragging, use the arrow keys to move the item. Press space again to drop the item in its new position, or press escape to cancel.
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:
- Scroll slowly, as with a trackpad, not a mouse wheel
- 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:
- Scroll slowly, as with a trackpad, not a mouse wheel
- 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:
- Scroll slowly, as with a trackpad, not a mouse-wheel
- 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
Metadata
Metadata
Assignees
Labels
Type
Projects
Milestone
Relationships
Development
- fix(cdk/scrolling): virtual-scroll flickers in zoneless modeangular/components
- fix(cdk/scrolling): virtual-scroll flickers in zoneless modeangular/components
- fix(cdk/scrolling): virtual scroll flickers in zoneless mode.angular/components
- fix(cdk/scrolling): Prevent virtual scroll 'flickering' with zonelessangular/components
Activity
[-]bug(cdl/scrolling): virtual-scroll flickers during scroll in zoneless mode[/-][+]bug(cdk/scrolling): virtual-scroll flickers during scroll in zoneless mode[/+]Klaster1 commentedon Jun 22, 2024
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 commentedon Jul 4, 2024
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 commentedon Aug 27, 2024
This is also an issue in the latest release (
18.2.1
). Is there a known workaround for this issue?OonihiloO commentedon Aug 27, 2024
@xyzmaker1 none that I know...
The code to fix this issue seems to have been stabilized in
angular
(theafterNextRender
api), but it seems thatzoneless
being still experimental, the team has other priority.xyzmaker1 commentedon Aug 27, 2024
@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:
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.fix(cdk/scrolling): virtual scroll flickers in zoneless mode.
fix(cdk/scrolling): virtual scroll flickers in zoneless mode.
fix(cdk/scrolling): virtual scroll flickers in zoneless mode.
fix(cdk/scrolling): Prevent virtual scroll 'flickering' with zoneless
fix(cdk/scrolling): Prevent virtual scroll 'flickering' with zoneless
atscott commentedon Jul 17, 2025
fixed by #31316