Safari is not respecting scaling applied to a foreignObject

Question

The following is a strange, and clearly buggy behavior of Safari (tested with versions 11 & 12). A <foreignObject> containing HTML, when scaled, still displays at its original size, even when its local userspace coordinates are scaled against the screen. The HTML content will visibly overflow the parent <svg>, even against explicit CSS rules.

Other answers around here point out that the width and height need to be set explicitly (I tested with both percentages and absolute units), and the namespace should be set (I tested with setting it on the <foreignObject> tag itself, and on a single immediate child), but nothing so far has helped.

The strange thing is that dev tools display the marking rectange (the overlay in the browser window) at its intended, scaled size, while the reported numbers for the size are the unscaled ones.

Here is the intended setup:

svg, foreignObject {
  overflow: hidden;
}
rect {
  fill:yellow;
}
#content {
  position: relative;
  width: 100%;
  height: 100%;
  background: red;
  border-radius: 50%;
}

<svg width="200px" height="200px" viewBox="0 0 400 400">
  <rect width="100%" height="100%" />
  <foreignObject width="400" height="400">
    <div id="content" xmlns="http://www.w3.org/1999/xhtml"></div>
  </foreignObject>
</svg>

Safari screenshot:

Using a transform attribute (also on a parent <g>) instead of implicit scaling via viewBox makes no difference. Also, I have played around with all combinations of absolute and relative sizings

Does anyone have an idea how to get around this issue?

Answer 1

This seems to be related to webkit bug 23113. The only workaround I've found so far is adding a CSS transform: scale(${scale}) (where you'd have to get the current scale using JS) property to a <section> inside foreignObject (an example can be found in marpit-svg-polyfill)