fix(virtual-scroll): correct horizontal scrolling in RTL (#12512)

Author: mmalerba

src/cdk-experimental/scrolling/auto-size-virtual-scroll.ts

@@ -125,7 +125,7 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
   attach(viewport: CdkVirtualScrollViewport) {
     this._averager.reset();
     this._viewport = viewport;
-    this._setScrollOffset();
+    this._renderContentForCurrentOffset();
   }
 
   /** Detaches this scroll strategy from the currently attached viewport. */
@@ -143,7 +143,7 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
   /** @docs-private Implemented as part of VirtualScrollStrategy. */
   onDataLengthChanged() {
     if (this._viewport) {
-      this._setScrollOffset();
+      this._renderContentForCurrentOffset();
       this._checkRenderedContentSize();
     }
   }
@@ -241,7 +241,7 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
       // jitteriness if we just jump to the estimated position. Instead we make sure to scroll by
       // the same number of pixels as the scroll magnitude.
       if (scrollMagnitude >= viewport.getViewportSize()) {
-        this._setScrollOffset();
+        this._renderContentForCurrentOffset();
       } else {
         // The number of new items to render on the side the user is scrolling towards. Rather than
         // just filling the underscan space, we actually fill enough to have a buffer size of
@@ -346,18 +346,12 @@ export class AutoSizeVirtualScrollStrategy implements VirtualScrollStrategy {
   }
 
   /**
-   * Sets the scroll offset and renders the content we estimate should be shown at that point.
-   * @param scrollOffset The offset to jump to. If not specified the scroll offset will not be
-   *     changed, but the rendered content will be recalculated based on our estimate of what should
-   *     be shown at the current scroll offset.
+   * Recalculates the rendered content based on our estimate of what should be shown at the current
+   * scroll offset.
    */
-  private _setScrollOffset(scrollOffset?: number) {
+  private _renderContentForCurrentOffset() {
     const viewport = this._viewport!;
-    if (scrollOffset == null) {
-      scrollOffset = viewport.measureScrollOffset();
-    } else {
-      viewport.setScrollOffset(scrollOffset);
-    }
+    const scrollOffset = viewport.measureScrollOffset();
     this._lastScrollOffset = scrollOffset;
     this._removalFailures = 0;
 

src/cdk/scrolling/scrollable.ts

@@ -48,21 +48,21 @@ export class CdkScrollable implements OnInit, OnDestroy {
   private _destroyed = new Subject();
 
   private _elementScrolled: Observable<Event> = Observable.create(observer =>
-      this._ngZone.runOutsideAngular(() =>
-          fromEvent(this._elementRef.nativeElement, 'scroll').pipe(takeUntil(this._destroyed))
+      this.ngZone.runOutsideAngular(() =>
+          fromEvent(this.elementRef.nativeElement, 'scroll').pipe(takeUntil(this._destroyed))
               .subscribe(observer)));
 
-  constructor(private _elementRef: ElementRef<HTMLElement>,
-              private _scroll: ScrollDispatcher,
-              private _ngZone: NgZone,
-              @Optional() private _dir?: Directionality) {}
+  constructor(protected elementRef: ElementRef<HTMLElement>,
+              protected scrollDispatcher: ScrollDispatcher,
+              protected ngZone: NgZone,
+              @Optional() protected dir?: Directionality) {}
 
   ngOnInit() {
-    this._scroll.register(this);
+    this.scrollDispatcher.register(this);
   }
 
   ngOnDestroy() {
-    this._scroll.deregister(this);
+    this.scrollDispatcher.deregister(this);
     this._destroyed.next();
     this._destroyed.complete();
   }
@@ -74,7 +74,7 @@ export class CdkScrollable implements OnInit, OnDestroy {
 
   /** Gets the ElementRef for the viewport. */
   getElementRef(): ElementRef<HTMLElement> {
-    return this._elementRef;
+    return this.elementRef;
   }
 
   /**
@@ -86,8 +86,8 @@ export class CdkScrollable implements OnInit, OnDestroy {
    * @param options specified the offsets to scroll to.
    */
   scrollTo(options: ExtendedScrollToOptions): void {
-    const el = this._elementRef.nativeElement;
-    const isRtl = this._dir && this._dir.value == 'rtl';
+    const el = this.elementRef.nativeElement;
+    const isRtl = this.dir && this.dir.value == 'rtl';
 
     // Rewrite start & end offsets as right or left offsets.
     options.left = options.left == null ? (isRtl ? options.end : options.start) : options.left;
@@ -119,7 +119,7 @@ export class CdkScrollable implements OnInit, OnDestroy {
   }
 
   private _applyScrollToOptions(options: ScrollToOptions): void {
-    const el = this._elementRef.nativeElement;
+    const el = this.elementRef.nativeElement;
 
     if (supportsScrollBehavior()) {
       el.scrollTo(options);
@@ -145,7 +145,7 @@ export class CdkScrollable implements OnInit, OnDestroy {
   measureScrollOffset(from: 'top' | 'left' | 'right' | 'bottom' | 'start' | 'end'): number {
     const LEFT = 'left';
     const RIGHT = 'right';
-    const el = this._elementRef.nativeElement;
+    const el = this.elementRef.nativeElement;
     if (from == 'top') {
       return el.scrollTop;
     }
@@ -154,7 +154,7 @@ export class CdkScrollable implements OnInit, OnDestroy {
     }
 
     // Rewrite start & end as left or right offsets.
-    const isRtl = this._dir && this._dir.value == 'rtl';
+    const isRtl = this.dir && this.dir.value == 'rtl';
     if (from == 'start') {
       from = isRtl ? RIGHT : LEFT;
     } else if (from == 'end') {

src/cdk/scrolling/scrolling-module.ts

@@ -15,7 +15,7 @@ import {CdkVirtualForOf} from './virtual-for-of';
 import {CdkVirtualScrollViewport} from './virtual-scroll-viewport';
 
 @NgModule({
-  imports: [PlatformModule, BidiModule],
+  imports: [BidiModule, PlatformModule],
   exports: [
     BidiModule,
     CdkFixedSizeVirtualScroll,

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

@@ -35,6 +35,7 @@ cdk-virtual-scroll-viewport {
   contain: strict;
   transform: translateZ(0);
   will-change: scroll-position;
+  -webkit-overflow-scrolling: touch;
 }
 
 // Wrapper element for the rendered content. This element will be transformed to push the rendered
@@ -44,7 +45,14 @@ cdk-virtual-scroll-viewport {
   top: 0;
   left: 0;
   contain: content;
-  will-change: transform;
+
+  // Note: We can't put `will-change: transform;` here because it causes Safari to not update the
+  // viewport's `scrollHeight` when the spacer's transform changes.
+
+  [dir='rtl'] & {
+    right: 0;
+    left: auto;
+  }
 }
 
 .cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper {
@@ -67,7 +75,9 @@ cdk-virtual-scroll-viewport {
   height: 1px;
   width: 1px;
   transform-origin: 0 0;
-  will-change: transform;
+
+  // Note: We can't put `will-change: transform;` here because it causes Safari to not update the
+  // viewport's `scrollHeight` when the spacer's transform changes.
 
   [dir='rtl'] & {
     right: 0;