bug(cdk/drag-drop): Improper positioning of drag preview since it uses native popover (v17.3.6 and above)

[stanley-skyline]

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

17.3.5

Description

A specific combination of an already existing CSS declaration on a cdkDrag element causes the position of the drag preview element to be incorrect because the resulting CSS is no longer identical to how it was prior to using the native popoper (so prior to version 17.3.6).

The exact cause is the addition of user agent styling that was not applied before, namely: inset: 0px; (using Chrome)
In addition to the properties top and left (which are always set to 0 anyway), bottom and right are now also set to 0 by the UA styles being applied now.

This CSS rule should be extended I think (with inset: unset;).

Reproduction

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

1. Drag "Item 1" (observe that the element is not at the position of the pointer, but quite a bit down)
2. See how align-self: center; affects the position of the drag preview.

Expected Behavior

Using align-self: center on the cdkDrag element (.example-box) should not affect the position of the drag preview. The position should be exactly the same as when this CSS declaration is not used. In other words, there should be no difference in the final result compared to when cdk/drag-drop did not use popoper under the hood for the preview.

Actual Behavior

The element is centered vertically between top and bottom (if you do not consider the transform).

The combination of CSS below results in this particular issue (only properties included that really lead to this particular behavior):

element.style {
    position: fixed !important;
    top: 0px;
}

.example-box {
    align-self: center;
}

/* user agent stylesheet */
[popover] { 
    inset: 0px;
}

Environment

• Angular: 19.0.0-next.2
• CDK/Material: 19.0.0-next.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 11

[sOnU1002]

i would like to work on this issue please assign me task

[angular-automatic-lock-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.}