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

【问题标题】：Why is the Chrome inspector showing different sizes for same-sized elements in an SVG?为什么 Chrome 检查器在 SVG 中为相同大小的元素显示不同的大小？
【发布时间】：2020-04-12 21:31:38
【问题描述】：

在下面的 sn-p 中，Chrome 检查器报告 div 和 foreignObject 比 rect 和文本节点大 50%，即使它们都占用屏幕上的相同空间。 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 检查器结果：

【问题讨论】：

无法在 macOS 上的 Chrome 80 和 84 中重现。但无论如何，“是什么导致 Chrome 报告差异？”的答案。只是“一个错误”。将此报告给the ones who can fix it。
@Kaiido 谢谢！我想我找到了有关此错误的现有报告。

标签： google-chrome svg web-inspector html-rendering

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

确实是chrome的一个bug。

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

windows

Mac chrome 运行良好（devicePixelRatio：2）： mac

【讨论】：