Mirror object is mispositioned when container has backdrop-filter CSS rule

[webakimbo]

If the CSS for the Sortable container has a backdrop-filter rule (even if it's zero), the mirror object gets positioned incorrectly.

Codepen here. Use the checkbox to toggle on/off the offending CSS declaration.

• Library version: 1.0.0-beta.12
• Browsers: Chrome v98.0.4758.80
• Tech stack: Sortable + vanilla JS

[webakimbo]

(FYI: this is a bug, but the UI is not currently letting me label it as such.)

[zjffun]

Looks like because position: fixed is not based on the top left corner of the page in some cases.

You can try fix #455, or use DragSensor.

[webakimbo]

Good find, that must be it. From the spec:

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context.