cdk/scrolling - scrolling is not working smoothly for some input for custom strategy implemented by extending VirtualScrollStrategy

[shernesbabu]

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

No response

Description

We have to implement virtual scrolling for list of items where item can be of either 100px hight or 50px height.
The hight of each item is known before rendering, We implemented custom strategy by extending VirtualScrollStrategy.
But the scrolling is not smooth and it is flickering for some combination of elements.
We have tried the approach used this link - https://stackblitz.com/edit/custom-virtual-scroll-stack-overflow-answer?file=src%2Fapp%2Fcustom-virtual-scroll-strategy-directive.ts
Is it really possible to implement virtual scrolling for variable size items by extending VirtualScrollStrategy?

Reproduction

Steps to reproduce:

1. open https://stackblitz.com/edit/custom-virtual-scroll-stack-overflow-answer?file=src%2Fapp%2Fcustom-virtual-scroll-strategy-directive.ts

2. Make the below changes to files
   app.component.ts

                        import { Component, VERSION } from '@angular/core';
                        
                        @Component({
                          selector: 'my-app',
                          templateUrl: './app.component.html',
                          styleUrls: ['./app.component.css'],
                        })
                        export class AppComponent {
                          items: number[] = Array.from(Array(500).keys()).map((i) =>
                            (i + 1) % 5 ? 50 : 100
                          );
                        }
   

app.component.html

              <cdk-virtual-scroll-viewport customVirtualScrollStrategy [itemHeights]="items">
                <div *cdkVirtualFor="let item of items; index as i">
                  {{ i }}
                </div>
              </cdk-virtual-scroll-viewport>

app.component.css

          div:nth-child(5n) {
            height: 100px;
            background: cyan;
            border: 1px black solid;
          }
          div {
            height: 50px;
            background: magenta;
            border: 1px black solid;
          }
          cdk-virtual-scroll-viewport {
            height: 500px;
          }

Expected Behavior

should scroll smoothly.

Actual Behavior

scrolling is not smooth and flickers sometime.

Environment

• Angular:14.1.0
• CDK/Material:14.1.0
• Browser(s):Chrome
• Operating System (e.g. Windows, macOS, Ubuntu):Windows

[digaus]

Same issue here but only when scrolling up :/