SVG: iframe рендерит вне постороннего объекта

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 .

РЕДАКТИРОВАТЬ: я вижу, что это происходит в Chrome и Safari на Mac. Он отлично работает на Firefox.

Как сделать рендер iframe в правильном положении?