Search code examples
htmlcsspositiondraggable

draggable="true" preview hides children that are position:absolute?

Here is a demonstration:

  • Top: child <div> is visible in the drag preview
  • Bottom: child <div> is not visible in the drag preview

.absolute {
  position: absolute;
}

.draggable {
  position: relative;
  height: 60px;
  border: 1px solid #CCC;
  margin: 10px;
}

.draggable div {
  height: 40px;
  width: 40px;  
}

.left {
  background-color: blue;
}

.right {
  background-color: red;
}

.left.absolute {
  top: 10px;
  left: 10px;
}

.right.absolute {
  top: 10px;
  right: 10px;
}

.right.float {
  float: right;
  margin: 10px;
}

.left.float {
  margin: 10px;
  float: left;
}
<!-- Expected behavior -->
<div class="draggable" draggable="true">
  <div class="left float">&nbsp;</div>
  <div class="right float">&nbsp;</div>
</div>

<!-- Bug -->
<div class="draggable" draggable="true">
  <div class="left absolute">&nbsp;</div>
  <div class="right absolute">&nbsp;</div>
</div>

Solution

  • It was a known issue, now fixed.