JSFiddle - React, Tailwind, and code Playground

HTML

<svg style="border: 1px solid red;">
  <g transform="matrix(1,0,0,1,50,50)">
    <foreignObject x='0' y='0' height='100px' width='100px'>
      <div style="border: 1px solid blue;">
        <div style="position:static">Static</div>
        <div style="position:absolute">Absolute</div>
        <div style="position:relative">Relative</div>
      </div>
    </foreignObject>
  </g>
</svg>

<p>The above is as expected in Chrome, content is inside the foreignObject.</p>
<p>In Safari, if any non-static positioned content is in the foreignObject, they render relative to the containing svg instead.</p>