相关疑难解决方法(0)

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

这里的其他答案指出需要明确设置宽度和高度（我用百分比和绝对单位进行了测试），并且应该设置命名空间（我在<foreignObject>标签本身和单个直接子项上设置它进行了测试)，但到目前为止没有任何帮助。

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

这是预期的设置：

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

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

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

更新日期

由于 Apple 是一家价值 2 万亿美元的公司，让我们尝试通过在此处提交错误报告来让他们解决此问题： https: //www.apple.com/feedback/safari.html

https://discussions.apple.com/thread/251753724?answerId=253364840022&page=1

在 Chrome 和 Firefox 中没有问题，但在 safari 中出现问题：

它应该看起来像 Chrome 中的：

如果我将固定样式=“位置：固定”添加到外部div，那么它们的位置是正确的，但它们的大小仍然是safari中较小的那个。

我尝试将 Body 添加到对象的根目录中，但这只是让它们从 Safari 中完全消失。这篇文章也提到了这一点：

Safari 不考虑应用于foreignObject 的缩放

您可以非常清楚地听到 safari（新 ie）不尊重缩放