💰 20 USDT Bounty - "bug(cdk/drag-drop): preview element position bre.."

[PomeloBounties]

Bounty

bug(cdk/drag-drop): preview element position breaks when parent uses transform created by @SoA432 on Pomelo Bounties

Summary

Request failed with status code 429

Apply

https://bounties.pomelo.io/23133a344fcf

Original Issue

angular/components#28864

Title

bug(cdk/drag-drop): preview element position breaks when parent uses transform

Body

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

When using [cdkDragPreviewContainer]="'parent'" and having parent element with css styles transform on it breaks the position of preview item when user starts dragging.

This is because preview item uses position: fixed and when parent has transform css, child with fixed position's offset starts from its parent instead of browser viewport.

Reproduction

StackBlitz link: https://stackblitz.com/edit/j5v8si?file=src%2Fexample%2Fcdk-drag-drop-connected-sorting-group-example.html
Steps to reproduce:

1. create two connected drag drop list
2. use [cdkDragPreviewContainer]="'parent'" on drag item in second list
3. apply style="transform: translateZ(0)" to parent
4. now drag the item from second list and observe the position of preview item as you drag

Expected Behavior

drag preview item should calculate correct position so that it follows mouse curser position.

Actual Behavior

drag preview item gets wrong position and sometime shows far away from cursor position.

Environment

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

Base Reward

20.0000 USDT

Note

For technical discussion use the original issue. This issue is for tracking the bounty application and implementation progress.