Skip to content

Commit ee9abb8

Browse files
authored
Revert "fix(cdk/scrolling): fix virtual scrolling jankiness with run coalescing (#28846)" (#28890)
This reverts commit d91d0d4. This broke an app in g3, reverting while we investigate
1 parent 81fe8f3 commit ee9abb8

File tree

2 files changed

+20
-34
lines changed

2 files changed

+20
-34
lines changed

src/cdk/scrolling/virtual-scroll-viewport.ts

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,14 @@
88

99
import {Directionality} from '@angular/cdk/bidi';
1010
import {ListRange} from '@angular/cdk/collections';
11-
import {Platform} from '@angular/cdk/platform';
1211
import {
13-
afterNextRender,
1412
booleanAttribute,
1513
ChangeDetectionStrategy,
1614
ChangeDetectorRef,
1715
Component,
1816
ElementRef,
1917
inject,
2018
Inject,
21-
Injector,
2219
Input,
2320
NgZone,
2421
OnDestroy,
@@ -28,20 +25,21 @@ import {
2825
ViewChild,
2926
ViewEncapsulation,
3027
} from '@angular/core';
28+
import {Platform} from '@angular/cdk/platform';
3129
import {
3230
animationFrameScheduler,
3331
asapScheduler,
3432
Observable,
35-
Observer,
3633
Subject,
34+
Observer,
3735
Subscription,
3836
} from 'rxjs';
3937
import {auditTime, startWith, takeUntil} from 'rxjs/operators';
4038
import {ScrollDispatcher} from './scroll-dispatcher';
4139
import {CdkScrollable, ExtendedScrollToOptions} from './scrollable';
40+
import {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';
4241
import {ViewportRuler} from './viewport-ruler';
4342
import {CdkVirtualScrollRepeater} from './virtual-scroll-repeater';
44-
import {VIRTUAL_SCROLL_STRATEGY, VirtualScrollStrategy} from './virtual-scroll-strategy';
4543
import {CdkVirtualScrollable, VIRTUAL_SCROLLABLE} from './virtual-scrollable';
4644

4745
/** Checks if the given ranges are equal. */
@@ -175,10 +173,6 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
175173
/** Subscription to changes in the viewport size. */
176174
private _viewportChanges = Subscription.EMPTY;
177175

178-
private _injector = inject(Injector);
179-
180-
private _isDestroyed = false;
181-
182176
constructor(
183177
public override elementRef: ElementRef<HTMLElement>,
184178
private _changeDetectorRef: ChangeDetectorRef,
@@ -256,8 +250,6 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
256250
this._detachedSubject.complete();
257251
this._viewportChanges.unsubscribe();
258252

259-
this._isDestroyed = true;
260-
261253
super.ngOnDestroy();
262254
}
263255

@@ -506,29 +498,23 @@ export class CdkVirtualScrollViewport extends CdkVirtualScrollable implements On
506498

507499
/** Run change detection. */
508500
private _doChangeDetection() {
509-
if (this._isDestroyed) {
510-
return;
501+
this._isChangeDetectionPending = false;
502+
503+
// Apply the content transform. The transform can't be set via an Angular binding because
504+
// bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
505+
// string literals, a variable that can only be 'X' or 'Y', and user input that is run through
506+
// the `Number` function first to coerce it to a numeric value.
507+
this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
508+
// Apply changes to Angular bindings. Note: We must call `markForCheck` to run change detection
509+
// from the root, since the repeated items are content projected in. Calling `detectChanges`
510+
// instead does not properly check the projected content.
511+
this.ngZone.run(() => this._changeDetectorRef.markForCheck());
512+
513+
const runAfterChangeDetection = this._runAfterChangeDetection;
514+
this._runAfterChangeDetection = [];
515+
for (const fn of runAfterChangeDetection) {
516+
fn();
511517
}
512-
513-
this.ngZone.run(() => {
514-
this._changeDetectorRef.markForCheck();
515-
afterNextRender(
516-
() => {
517-
this._isChangeDetectionPending = false;
518-
// Apply the content transform. The transform can't be set via an Angular binding because
519-
// bypassSecurityTrustStyle is banned in Google. However the value is safe, it's composed of
520-
// string literals, a variable that can only be 'X' or 'Y', and user input that is run through
521-
// the `Number` function first to coerce it to a numeric value.
522-
this._contentWrapper.nativeElement.style.transform = this._renderedContentTransform;
523-
const runAfterChangeDetection = this._runAfterChangeDetection;
524-
this._runAfterChangeDetection = [];
525-
for (const fn of runAfterChangeDetection) {
526-
fn();
527-
}
528-
},
529-
{injector: this._injector},
530-
);
531-
});
532518
}
533519

534520
/** Calculates the `style.width` and `style.height` for the spacer element. */

src/dev-app/main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,6 @@ bootstrapApplication(DevApp, {
5353
{provide: Directionality, useClass: DevAppDirectionality},
5454
cachedAppState.zoneless
5555
? ɵprovideZonelessChangeDetection()
56-
: provideZoneChangeDetection({eventCoalescing: true, runCoalescing: true}),
56+
: provideZoneChangeDetection({eventCoalescing: true}),
5757
],
5858
});

0 commit comments

Comments
 (0)