Safari ForeignObject Transform Bug

by Roman Bruckner

HTML

<svg overflow="visible">
  <g transform="scale(2) translate(30, 30)">

    <foreignObject width="200" height="200">
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:static">
        <input type="number"  />
        static
      </div>
    </foreignObject>
    
    <foreignObject y="60" width="200" height="200">
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:fixed">
        <input type="number" />
        fixed
      </div>
    </foreignObject>

    <foreignObject y="120" width="200" height="200">
      <div xmlns="http://www.w3.org/1999/xhtml" style="position:absolute">
        <input type="number" />
        absolute
      </div>
    </foreignObject>

  </g>
</svg>