SVG foreignObject textarea and text elements have their characters inverted on the x-axis

Question

I'm creating a custom measuring tool for the Autodesk Forge Viewer (Markupscore extension). I have achieved the line-drawing part with the SVG <path> tag fairly easily. However, I want to render a <textarea> for the user to enter a numerical value once the onMouseUp event is called (once the user has finished drawing the line). To do this I'm using a foreignObject, with a textarea for input and a text tag to display the text. For some reason, the characters I enter into this textarea are "upside down". The textarea itself is not; the writing direction is still left → right. It is just the individual characters that are upside down. It looks like this:

and the generated markup looks this:

<svg version="1.1" baseProfile="full" layer-order-id="markups-svg" style="position:absolute; left:0; top:0; transform:scale(1,-1); -ms-transform:scale(1,-1); -webkit-transform:scale(1,-1); -moz-transform:scale(1,-1); -o-transform:scale(1,-1); transformOrigin:0, 0; -ms-transformOrigin:0, 0; -webkit-transformOrigin:0, 0; -moz-transformOrigin:0, 0; -o-transformOrigin:0, 0; " width="1550" height="600" viewBox="-101.7644738631413 25.603030631786396 488.57934430714505 189.12748319689365" pointer-events="painted" cursor="crosshair">
   <g cursor="default">
      <g cursor="inherit" pointer-events="stroke">
         <path id="markup" d="m 0 5 v 0 -10 m -5 0 l 10 10 M 0 0 L 79.59484653519095 0 m 0 5 v 0 -10 m -5 0 l 10 10" stroke-width="0.49516667683974447" stroke="rgba(255,0,0,1)" fill="none" transform="translate( 25.07833084584351 , 104.7208155667812 ) rotate( 0 )"></path>
         <path id="hitarea" fill="transparent" stroke="transparent" d="m 0 5 v 0 -10 m -5 0 l 10 10 M 0 0 L 79.59484653519095 0 m 0 5 v 0 -10 m -5 0 l 10 10" stroke-width="9.95154083668433" transform="translate( 25.07833084584351 , 104.7208155667812 ) rotate( 0 )"></path>
         <foreignObject x="0" y="0" width="100" height="50" transform="translate( 25.07833084584351 , 104.7208155667812 ) rotate( 0 )">
            <textarea rows="1" dir="auto" maxlength="10" data-i18n="Text" style="resize: none; box-sizing: border-box; overflow: hidden; z-index: 1; padding: 5px; line-height: 130%; left: 468px; top: 198px; width: 150px; color: rgb(255, 0, 0); font-family: Arial; font-size: 10px; font-weight: normal; font-style: normal; height: 23px; opacity: 0; border: 1px solid red;"></textarea>
            <text style="color: red; opacity: 1;">1234</text>
         </foreignObject>
      </g>
   </g>
</svg>

Any idea what's going on? I have tried resetting browser styles, I have tried fiddling with the rotate attribute, and I have tried adding namespace attributes to the SVG, none of which has any effect on the text orientation. I'm completely new to working with SVG and foreignObjects, I'm sorry if I'm not being clear and not providing enough information.