为什么 Chrome 检查器对 SVG 中相同大小的元素显示不同的大小？

Question

在下面的代码片段中，Chrome 检查器报告 div 和 foreignObject 比 rect 和文本节点大 50%，尽管它们都是在屏幕上占用相同的 space。 Firefox 报告所有四个的大小相同。是什么导致 Chrome 报告差异？

<svg viewBox="0 0 300 100" style="width: 300px; height: 100px;">
 <rect fill="#f5f5a0" width="244" height="73"></rect>
 <foreignObject width="244" height="73">
  <div>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur quam sapien, in varius ipsum mollis quis.
  </div>
 </foreignObject>
</svg>

Chrome 检查员结果：

Firefox 检查器结果：

Answer 1

这似乎是由 Chrome 中的一个已知错误引起的：Issue 738022: getBoundingClientRect reports double size for foreignObject children on a HiDPI monitor。

报告的大小按 devicePixelRatio 缩放，在我的机器上是 1.5。

Answer 2

这确实是 chrome 中的一个错误。

这是我在 windows 10 chrome 80.0.3987.149 (devicePixelRatio: 2) 上的 foreignObject 大小。

windows

Mac chrome 效果很好（devicePixelRatio：2）： mac

为什么 Chrome 检查器对 SVG 中相同大小的元素显示不同的大小？

Why is the Chrome inspector showing different sizes for same-sized elements in an SVG?

svg

google-chrome

web-inspector

html-rendering