fix(cdk/scrolling): virtual scroll flickers in zoneless mode.

[jacob-noble]

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

[andy-clapson]

This is a sharp-looking pull request!

[atscott]

This is exactly how it was in d91d0d4 before it was reverted due to an internal breakage and moved outside in 32d2683.

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.

[jacob-noble]

@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?

[rdlabo]

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 32d2683 breakage is version-dependent. I have it working fine in the following environment.

@angular/core: 19.2.9
@angular/cdk“: 19.2.14

[bobbyg603]

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.

[bobbyg603]

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

[atscott]

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.

[jacob-noble]

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)?

[atscott]

I don't have that information, no.

[jacob-noble]

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?

[rdlabo]

@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.

[atscott]

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 #31240 which preserves the existing timing of the transform being set.

[rdlabo]

@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 #31240 get merged. Thanks again!