bug(cdkDragDrop/mat-dialog): cdkDragDrop does not work when page is scrolled before opening dialog

[Sajito]

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

I have a cdkDragList inside an mat-dialog-overlay. When the page is scrolled before opening the dialog, then the drag drop behaviour is not working correctly. Instead of directly reordering the list on drag, the item has to be dragged at least the distance, which the page previously was scrolled. Which makes it also impossible to reorder the list, once you have scrolled far enough.

Reproduction

Here is a simple StackBlitz example: https://stackblitz.com/edit/angular-ivy-7bnaz4

Steps to reproduce:

1. Click the first button to see the expected behaviour.
2. Scroll down to second button
3. Click the second button
4. Try reordering the list

Expected Behavior

I expect both cases to behave the same.

Actual Behavior

When using the second button, after scrolling, then the items won't reorder unless dragged far more than needed.

Environment

Output of ng version from my project.

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 11.2.11
Node: 14.18.1
OS: linux x64

Angular: 11.2.12
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1102.11
@angular-devkit/build-angular   0.1102.11
@angular-devkit/core            11.2.11
@angular-devkit/schematics      11.2.11
@angular/cdk                    11.2.11
@angular/cli                    11.2.11
@angular/material               11.2.11
@schematics/angular             11.2.11
@schematics/update              0.1102.11
rxjs                            6.6.7
typescript                      4.1.5

My project is running on Angular 11, but the StackBlitz provided is using Angular 13, to ensure the bug still exists and is not fixed already. Tested OS'es are Ubuntu 21.10 and MacOS 12. Browsers tested are:

• Microsoft Edge 98
• Firefox 97
• Safari 15
• Chromium 95

[crisbeto]

Duplicate of #14280.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}