backdrop-filter property droppable causes dragged item to disappear

[mrap]

Expected behavior

Dragging item does not disappear when dragging.

Actual behavior

Dragging item disappears when dragging. If you drag high enough on the page, the item actually appears from the bottom of the page.

Steps to reproduce

Add the backdrop-filter css property to any parent of Draggable within the DragDropContext. Any filter applied seems to cause the dragged items to disappear

What version of React are you using?

16.13.1

What version of react-beautiful-dnd are you running?

13.0.0

What browser are you using?

Google Chrome Canary

Demo

DEMO

[dbolesta]

I just want to confirm that I've encountered this issue as well. The simple addition of a single backdrop-filter css property (via styled-components) will cause a Draggable to appear well below the grab position, identical to the demo provided above.

OS: macOS 10.14.6 (Mojave) React: 16.12.0 react-beautiful-dnd: 12.2.0 Browser: Chrome 84.0.4147.125

[295]

A temporary solution:

<Parent
  position="relative"
  _before={{
    content: '""',
    backdropFilter: "...",
    position: "absolute",
    width: "100%",
    height: "100%"
  }}
>
  <DragDropContext .../>
</Parent>

[rendomnet]

Is this bug will be fixed?

[ricosandyca]

I'm using Chakra UI portal while the card's dragging, and it's working fine.

<Draggable ...>
  {(provided, snapshot) =>
    snapshot.isDragging ? (
      // render your card in portal
      <Portal>
        <YourCard .../>
      </Portal>
    ) : (
      <YourCard .../>
    )
  }
</Draggable>

https://user-images.githubusercontent.com/43330562/126056452-d8413543-b630-47ca-a697-1ab4a06e7dbd.mp4

[Jaagrav]

I'm using Chakra UI portal while the card's dragging, and it's working fine.

<Draggable ...>
  {(provided, snapshot) =>
    snapshot.isDragging ? (
      // render your card in portal
      <Portal>
        <YourCard .../>
      </Portal>
    ) : (
      <YourCard .../>
    )
  }
</Draggable>

Record_select-area_20210718120458.mp4

So how does ChakraUI apply backdrop-filter? Is it on the ::before?

[ricosandyca]

So how does ChakraUI apply backdrop-filter? Is it on the ::before?

No, it applies the backdrop-filter directly on the YourCard component it self. Portal is used to transport its wrapped component to the end of document.body. In other words, you can make your own portal to transport your component while it's getting dragged

[P4tr0ll]

I just encountered this bug and it was a pain to debug what was causing it. backdrop-filter on one of the parent elements made the dragged element incorrectly offsetted. Disabling this single property fixed the problem. Unlike the original post says, the parent with that property was outside of DragDropContext.

React - 18.2 Chrome - 121 React DnD - 13.1.8

[Rotem-React]

Same issue here on Material UI with @hello-pangea/dnd. Hours of debugging resulting in finding this issue in afterthought. Needle in a haystack...

React - 18.2 MUI - 5.14.18 @hello-pangea/dnd - 16.3