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

[ofirrifo]

Is this a regression?

• 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 176213d 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;
    }
}

[7schmiede]

@digimezzo it's not working as expected for me.
The cdk-virtual-scroll-spacer Tag has a style attribute with computed height.

And when I add

    height: 1px !important;

, the bug comes back and brings its brothers with it.