Skip to content

bug(CdkDragDrop): preview position is incorrect when inside of a popover using translate #28889

Closed
@JeffMosaic

Description

@JeffMosaic

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:

  1. Click on one of the items
  2. 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)

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: cdk/drag-drop

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions