angular
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
This is exactly how it was in https://github.com/angular/components/commit/d91d0d424b043c4da7b69d296967e62a751eac23 before it was reverted due to an internal breakage and moved outside in https://github.com/angular/components/commit/32d2683c86a4f5f0e4c388925bb3c0733ef1c554.
This will require another round of unpacking the problem and re-evaluating potential solutions. IIRC, this one broke scrolling entirely in the app. Once scrolling started, it never stopped.
@atscott - Thanks for taking the time to look at this. I wasn't aware that this was a solution that was tried previously.
I haven't run into the issue where scrolling broke entirely yet (either in the local environment or in one of the projects I'm involved in that makes use of this fix as a patch). Do you know how to reproduce that issue?
I've tried @jacob-noble 's this solution and it works fine. Either with fixed-size-virtual-scroll or with my own dynamic-size-virtual-scroll (@rdlabo/ngx-cdk-scroll-strategies ) also.
Maybe the https://github.com/angular/components/commit/32d2683c86a4f5f0e4c388925bb3c0733ef1c554 breakage is version-dependent. I have it working fine in the following environment.
@angular/core: 19.2.9 @angular/cdk“: 19.2.14
I ran into the virtual scroll flicker today in a zoneless ionic app. The changes in this PR appear to fix the problem, and I haven't noticed any detrimental side-effects to scrolling anywhere else in the app.
For anyone looking to try this fix I forked this repo and applied @jacob-noble 's fix to the 19.2.x branch and published the package to npm as @workingdevshero/cdk.
I ran into the virtual scroll flicker today in a zoneless ionic app. The changes in this PR appear to fix the problem, and I haven't noticed any detrimental side-effects to scrolling anywhere else in the app.
For anyone looking to try this fix I forked this repo and applied @jacob-noble 's fix to the 19.2.x branch and published the package to npm as @workingdevshero/cdk.
fwiw virtual scroll is still broken in 20 despite zoneless being stable. this fix also works in 20.0.x
Zoneless is not stable in v20. It is in developer preview. I have also verified that this change still breaks the internal application's scrolling.
Zoneless is not stable in v20. It is in developer preview. I have also verified that this change still breaks the internal application's scrolling.
@atscott - Can you provide context around how to verify that this change breaks scrolling (how to reproduce it)?
I have also verified that this change still breaks the internal application's scrolling.
Sorry, so when you say:
I have also verified that this change still breaks the internal application's scrolling.
How did you do this?
@atscott I'm curious about that too. I tested this across four different apps but couldn’t reproduce any scrolling interruptions. Could it be a browser issue? Or maybe something related to device specs? Even the smallest clue would be super helpful—I'd really appreciate any additional info you can share.
I ask the team to patch in the change, run the application, and check if the scrolling is broken. The issue is that when scrolling is performed, it continues infinitely.
The change in this PR affects the timing of the transform being applied. It applies it after change detection has run in the application rather than how it is now, where it's performed first. It's possible that there is some other computation in a component that depends on the transform existing before the component refreshes.
I have proposed a different change in https://github.com/angular/components/pull/31240 which preserves the existing timing of the transform being set.
@atscott Thanks for the detailed explanation! Thanks to you, I was able to hold off on the official release.
I'm looking forward to seeing the pull request at https://github.com/angular/components/pull/31240 get merged. Thanks again!