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
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:
- Drag "Item 1" (observe that the element is not at the position of the pointer, but quite a bit down)
- 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