文本输入框为SVG中的“ foreignObject”-文本溢出问题

Question

我通过使用'foreignObject'标签在svg中有一个文本输入框。

这很好用，但是如果您输入的输入框的长度超过宽度，则会溢出，那么文本实际上会出现在页面的其他位置-可能是默认位置，没有异物标记...

这是几个屏幕截图，以解释发生了什么...

-在输入溢出之前（一切正常）

-一旦文本开始溢出，您可以看到输入的文本，然后开始出现在屏幕的左上角，而不是文本框的位置？

html代码片段：

<foreignObject x="-23" y="-8" width="40" height="16" style="overflow:visible;" transform="translate(0,0) scale(1,-1)">
     <input type="text" value="50"  style="width: 40px; height:16px;" class="tableinput1">
</foreignObject>

CSS：

.tableinput1 {
    font: 0.6em verdana;
    text-align:left;
    color:black;
    background-color:rgba(0, 0, 0, 0);
    border: none;
    outline:none;
}

有谁知道为什么会这样？谢谢

-更新-

报告为Chrome中的错误-https: //bugs.chromium.org/p/chromium/issues/detail? id = 694286 & q = label%3ANeeds- Milestone& colspec = ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status% 20Owner% 20Summary％20OS％20Modified

无法在Chrome中使用

在野生动物园和Firefox工作

https://jsfiddle.net/mpwaw/xcx2e56L/