No animation on drag div with display:contents

[nukuutos]

Expected behavior

Dragging animation on drag div with display: contents.

Actual behavior

No animation on dragging div with display: contents.

Suggested solution?

I think, styles don't correctly apply todiv with display: contents.

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 Version 86.0.4240.198

Demo

Everything's fine when display property of .service is not contents

<Draggable draggableId={title} index={order}>
        {({ innerRef, draggableProps, dragHandleProps }, snapshot) => {
          return (
            <div
              ref={innerRef}
              {...draggableProps}
              {...dragHandleProps}
              className="service">
              <span className="service__title mt-s-3">{title}</span>
              <span className="service__duration">{duration}</span>
              <span className="service__price">{price}</span>
            </div>
          );
        }}
</Draggable>

[stonecrafter]

I have the same problem.

[yxeri]

I stumbled upon this one too. Is this expected behaviour?

[nukuutos]

After some gathering I understood that it's not working correctly with grid, only flexbox. If I'm wrong, correct me.

[yxeri]

It works with display: grid, but it acts up with contents.

[stephenh]

@nukuutos curious why you closed this issue? Can we keep it open? As far as I can tell, using display: contents is still broken/unsupported.

[nukuutos]

If it works with display: grid (@yxeri ) and not with display: contents so we must to reopen it

[fernandofleury]

any idea on how to circumvent this? I'm also stuck in a similar scenario.

I have a display: grid wrapper and a group of columns (but there is no "row" definition) since using css grid doesn't require it

[larissa-n]

Any updates on this?

[SpectorHacked]

Still happening? any workaround to this?