html - Safari 不尊重应用于 foreignObject 的缩放

Question

以下是 Safari 的一个奇怪且明显有问题的行为(使用版本 11 和 12 测试)。一个 <foreignObject>包含 HTML 的内容在缩放时仍以其原始大小显示，即使其本地用户空间坐标相对于屏幕进行缩放。 HTML 内容将明显溢出父级 <svg> ，甚至违反明确的 CSS 规则。

这里的其他答案指出 the width and height need to be set explicitly (我用百分比和绝对单位进行了测试)，以及 namespace should be set (我将它设置在 <foreignObject> 标签本身和一个直接的 child 上进行了测试)，但到目前为止没有任何帮助。

奇怪的是，开发工具以其预期的缩放大小显示标记矩形(浏览器窗口中的叠加层)，而报告的大小数字是未缩放的。

这是预期的设置:

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 截图:



使用转换属性(也在父 <g> 上)而不是通过 viewBox 隐式缩放没有区别。此外，我已经使用了绝对和相对尺寸的所有组合

有谁知道如何解决这个问题？

Answer 1

这似乎与webkit bug 23113有关.到目前为止我发现的唯一解决方法是添加 CSS transform: scale(${scale}) (您必须使用 JS 获取当前比例)属性为 <section>内foreignObject (示例可以在 marpit-svg-polyfill 中找到)