Chrome中的foreignObject呈现问题

Question

我创建了一个基于svg的绘图工具，我们可以创建不同类型的对象，也可以拖动它们。对于某些对象，我使用foreignObject来显示svg。

中的html元素

例如我在svg中使用contentEditable div作为粘滞便笺。但是当我将拖动应用到这个粘滞便笺时，它表现得非常怪异，并且在Chrome浏览器（版本52.0.2743.82 m）中渲染很奇怪。可能是什么问题？

演示：

https://jsfiddle.net/qwg3r/913/ （选择黄色粘滞便笺并尝试拖动它）

<svg width="100%" height="500">
  <foreignObject id="1" x="10" y="10" width="100" height="150">
    <div autofocus="" style="position: relative;padding: 10px; width: 100%; height: auto; border-bottom-left-radius: 60px 8px; box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 6px; display: inline-block; word-wrap: break-word; font-size: 13px; text-align: center; min-height: 156.499px; background: rgb(251, 234, 149);z-index:12;" xmlns="http://www.w3.org/1999/xhtml" focus-preventer="" contenteditable="true"></div>
  </foreignObject>
</svg>

PS 我在便利贴的左上角使用某种设置图标来自定义其颜色和其他内容，所以我在其div样式中使用了z-index以便设置即使图标位于绘图面板之外，图标也始终可见。