拖动带有隐藏溢出的内联div导致错误的重影图像

Question

我试图使用可拖动的div，但拖动时得到的鬼影是错误的。 div是内联的，并且有一个隐藏的溢出部分。这是一个演示问题的最小示例。 HTML：

<div class="box" draggable="true">
  <div class="inner-box"> </div>
</div>
<div class="box">
</div>

CSS：

.box {
  overflow: hidden;
  display: inline-block;
  width: 80px;
  height: 80px;
  background-color: #ccc;
}

.inner-box {
  position: relative;
  left: 40px;
  top: 40px;
  width: 80px;
  height: 80px;
  border: 2px solid black;
}

JSFiddle：https://jsfiddle.net/gokjkqxm/

如果您尝试拖动第一个div，则重影图像包含第二个div的一部分，这是我想要避免的。有没有人知道如何在不使用图像的情况下解决这个问题？

提前致谢！