a wrong height style with cdk-virtual-scroll-spacer (cdk-virtual-scroll-viewport)

[ofirrifo]

Is this a regression?

• [X] Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

14.0.3

Description

After I updated angular material to 14.2.7 from 14.0.3 I start to get wrong height style with the div element that has the css class .cdk-virtual-scroll-spacer

Reproduction

Steps to reproduce:

1. install the angular material 14.2.7
2. use the cdk-virtual-scroll-viewport

My Example code

 <cdk-virtual-scroll-viewport
        [itemSize]="itemHeight"
        [style.height.px]="virtualScrollViewportHeight"
        (scrolledIndexChange)="getMoreItems()">
        <ng-container *cdkVirtualFor="let item of items; trackBy: trackById; let index = index">
          <ng-container
            *ngTemplateOutlet="itemTemplate;  context: {item: item, index: index }"
          ></ng-container>
        </ng-container>
      </cdk-virtual-scroll-viewport>

Expected Behavior

To get the correct style height on the div element that has the css class .cdk-virtual-scroll-spacer

Actual Behavior

The div element that has the cs class .cdk-virtual-scroll-spacer get a style height which create a big space when I scroll to the end

Environment

• Angular: Angular CLI: 14.2.10 Node: 16.10.0 Package Manager: npm 7.10.0 OS: darwin x64

Angular: 14.2.12 ... common, core

Package Version

@angular-devkit/architect 0.1402.10 @angular-devkit/build-angular 14.2.10 @angular-devkit/core 14.2.10 @angular-devkit/schematics 14.2.10 @angular/animations 14.0.3 @angular/cdk 14.2.7 @angular/cli 14.2.10 @angular/compiler 14.0.3 @angular/compiler-cli 14.0.3 @angular/forms 14.0.3 @angular/language-service 14.0.3 @angular/material 14.2.7 @angular/platform-browser 14.0.3 @angular/platform-browser-dynamic 14.0.3 @angular/platform-server 14.0.3 @angular/router 14.0.3 @angular/service-worker 14.0.3 @schematics/angular 14.2.10 rxjs 7.8.0 typescript 4.7.4

• CDK/Material: 14.2.7
• Browser(s): any
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[m-malczyk]

We also came across this problem when we migrate angular & angular material from 12.X.X to 14.2.7.

We compared v12 with v14 and there are changes in cdk-virtual-scroll-spacer class. Adding those properties solve the problem (as temporary fix):

.cdk-virtual-scroll-spacer { position: absolute; top: 0; left: 0; }

[digimezzo]

We also came across this problem when we migrate angular & angular material from 12.X.X to 14.2.7.

We compared v12 with v14 and there are changes in cdk-virtual-scroll-spacer class. Adding those properties solve the problem (as temporary fix):

.cdk-virtual-scroll-spacer { position: absolute; top: 0; left: 0; }

This wasn't sufficient in my case. The scrollbar kept changing its length while scrolling. I had to apply these properties to fix it (based on commit https://github.com/angular/components/commit/176213d705f25def682644e29824b340ca1637b6 which is the commit that broke it):

.cdk-virtual-scroll-spacer {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 1px;
    transform-origin: 0 0;

    // 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;
        transform-origin: 100% 0;
    }
}