text input box as 'foreignObject' within a

Question

I have a text input box within my svg by using the 'foreignObject' tag.

This works well, however if you type in the input box longer than it's width, so that it overflows, then the text actually appears elsewhere on the page - possibly it's default position without the foreign object tag...

Here is a couple of screenshots to explain what is happening...

-before the input is overflowing (all is well)

-once the texts starts to overflow you can see the input text then starts to appear in the top left corner of the screen rather than in the position of the text box??

snipet of html code:

<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;
}

anyone have any ideas why this may be happening? thanks

---update---

reported as fault in 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

not working in chrome

working in safari & firefox

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