angular
bug(scrolling): Opening dialog in window virtual scroll break scrolling
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
cdk-virtual-scroll-viewport[scrollWindow] is empty when opening a mat-dialog if the window have been scrolled.
When the dialog is closed, everything returns to normal but the scroll is restored to top 0.
Reproduction
Steps to reproduce:
- Go to https://stackblitz.com/edit/angular-psylrc
- Click on "open dialog" button of the 100th line
Expected Behavior
The virtual scroll should not be influenced by dialog
Actual Behavior
Virtual scroll container become empty and when the dialog is closed the items come back but the scroll is restored to 0
Environment
- Angular: 15.0.2
- CDK/Material: 15.0.2
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any
I have this same issue where some of the rows are not shown when the dialog is open. I'm not experiencing a loss of scroll position like the OP though. If you open the dialog at around line 20 in the example given you can see that the rows after that are not shown but the rows before still are. It appears that the translateY of the virtual scroll and the top of the cdk-global-scrollblock are being changed when a dialog is opened. Perhaps this is causing the issue?
The problem still exists in Angular v19.
When scrolling inside a CdkVirtualScrollViewport, the .cdk-virtual-scroll-content-wrapper element receives a translateY(123px) CSS transform. The exact value depends on the scroll position.
However, when a MatDialog is opened, the translateY is reset to translateY(0px), which causes the items in the scrollable area to be cropped. There should be additional items visible below the dialog (indicated by the green lines).
