wrong dragged item position when backdrop-filter blur is set

[v1s10n-4]

First of all, thanks for that amazing library, it made my life easier when I started using it compared to other popular solutions.

I found a weird behavior that happens when a parent of SortableList has a backdropFilter set (in my case it was blur).

<div
  style={{
    backgroundImage: "url('https://source.unsplash.com/czOuPVsfHDw/900x900')",
  }}
>
  <div
    style={{
      maxWidth: 400,
      margin: "30px auto",
      padding: 64,
      backdropFilter: "blur(8px)",
    }}
  >
    <SortableList
      items={items}
      onChange={setItems}
      renderItem={(item) => (
        <SortableList.Item id={item.id}>
          {item.id}
          <SortableList.DragHandle />
        </SortableList.Item>
      )}
    />
  </div>
</div>

Here's a reproduction on CodeSandbox You can see that the dragged element is not positioned correctly, I also noticed that its shift depends on the viewport size (by resizing the window for example). A workaround I found was to apply the backdrop-blur on a pseudo-element (used tailwind for convenience):

...
 <div
   className="relative before:absolute before:inset-0 before:backdrop-blur-xl"
    style={{
      maxWidth: 400,
      margin: "30px auto",
      padding: 64,
    }}
  >
...

I just wonder why a such thing happens and how to make it work properly.

[jle-BLNG]

I'm experiencing the same issue. Applying backdrop-blur causes the overlay to be translated.