SVG：iframe渲染在foreignObject之外

Question

我在iframe内的foreignObject内的g内有svg，就像下面的代码一样：

<svg width="1024" height="1024">
  <g transform="translate(240, 240)">
    <foreignObject width="300px" height="200px">
      <div
        style="height: 200px; width: 300px; background-color: blue;"
      />
    </foreignObject>
  </g>
  <g transform="translate(240, 240)">
    <foreignObject width="300px" height="200px">
      <iframe
        width="300"
        height="200"
        src="https://www.openstreetmap.org/export/embed.html">
      </iframe>
    </foreignObject>
  </g>
</svg>

我希望iframe会以与g相同的方式在父级div的变换所指定的位置进行渲染，但会在{页面。

这里是CodePen上的相同代码。

编辑：我可以在Mac上的Chrome和Safari上看到这种情况。在Firefox上运行正常。

如何使iframe渲染在正确的位置？