URL: https://codepen.io/adam-lynch/pen/mYPBOb
Browser / Version: Firefox 66.0
Operating System: Mac OS X 10.14
Tested Another Browser: Yes
Problem type: Something else
Description: Native drag & drop ghost not shown if combined with display: grid and display: contents
Steps to Reproduce:
Bugzilla report: https://bugzilla.mozilla.org/show_bug.cgi?id=1550728
See https://codepen.io/adam-lynch/pen/mYPBOb.
Try to drag the item to the other box.
You don't see the native "ghost" element while it's being dragged. If you drop it in the box, that works fine. The rest works as expected.
The native "ghost" element should have been visible while dragging.
My CodePen was forked from https://codepen.io/davilera/pen/wpwrNW (which I found in https://neliosoftware.com/blog/native-drag-and-drop-with-html5/). This works as expected.
What I changed in my version:
- Added a div.wrapper element around div.item
- Added display: grid to div.day
- I changed the ondrop callback to append the element into div.day div.wrapper instead of div.wrapper
It seems to fail only when inside a element with display: contents which is inside an element with display: grid.
If either display rule is commented out, it works as expected.
It also works in other browsers I've tested. I'm on Mac OS X 10.14.4 if that helps.
Browser Configuration
Submitted in the name of @adam-lynch
From webcompat.com with ❤️
URL: https://codepen.io/adam-lynch/pen/mYPBOb
Browser / Version: Firefox 66.0
Operating System: Mac OS X 10.14
Tested Another Browser: Yes
Problem type: Something else
Description: Native drag & drop ghost not shown if combined with display: grid and display: contents
Steps to Reproduce:
Bugzilla report: https://bugzilla.mozilla.org/show_bug.cgi?id=1550728
See https://codepen.io/adam-lynch/pen/mYPBOb.
Try to drag the item to the other box.
You don't see the native "ghost" element while it's being dragged. If you drop it in the box, that works fine. The rest works as expected.
The native "ghost" element should have been visible while dragging.
My CodePen was forked from https://codepen.io/davilera/pen/wpwrNW (which I found in https://neliosoftware.com/blog/native-drag-and-drop-with-html5/). This works as expected.
What I changed in my version:
It seems to fail only when inside a element with display: contents which is inside an element with display: grid.
If either display rule is commented out, it works as expected.
It also works in other browsers I've tested. I'm on Mac OS X 10.14.4 if that helps.
Browser Configuration
Submitted in the name of
@adam-lynch
From webcompat.com with ❤️