Description
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
Currently if you are using cdk drag with a preview attached to its parent, and the parent is inside of a popover type element that uses absolute positioning and translate transformation then the preview artifact appears in the wrong location.
This appears to be happening because the fixed position is unable to break out of its container due to a parent element having a transform property attached. Based on MDN this appears to be the expected behavior.
Switching to use the global cdkDragPreviewContainer position works around this issue but then breaks styling because the preview element is removed from the DOM structure controlling style.
Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-1zhux8?file=src%2Fmain.ts
Steps to reproduce:
- Click on one of the items
- Start dragging
Expected Behavior
Preview element should be at the same position as the mouse pointer
Actual Behavior
Preview element is several pixels to the right and bottom on the cursor.
Environment
- Angular: ^17.2.0
- CDK/Material: ^17.3.4
- Browser(s): Chrome (maybe others)
- Operating System (e.g. Windows, macOS, Ubuntu): macOS (probably others)