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

Shopify / draggable

The JavaScript Drag & Drop library your grandparents warned you about.

https://shopify.github.io/draggable

MIT License

17.93k stars 1.09k forks source link

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

Open webakimbo opened 2 years ago

webakimbo commented 2 years ago

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 commented 2 years ago

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

zjffun commented 2 years ago

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 commented 2 years ago

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.