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

问：

我在我的 svg 中使用“foreignObject”标签有一个文本输入框。

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

这里有几张截图来解释正在发生的事情......

-在输入溢出之前（一切都很好）

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

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 中不起作用

在Safari和Firefox中工作

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