同一Chrome环境下外接显示器时缩放文本渲染偏移的原因咨询

我遇到了一个很有意思的Chrome渲染异常，想请教各位大佬背后的底层原因：

我写了一段简单的代码，逻辑很清晰：注册一款自定义字体，显示"Hello"文本，同时用四个<span>元素给文本做了精准的定位边框（两个水平条、两个垂直条），并且给根容器加了scale:20的缩放让细节更明显。在我的笔记本自带显示器（96 DPI）上，这些边框和文本完全对齐，效果很完美。

但一旦我接上外接显示器（192 DPI），哪怕是同一个浏览器标签、笔记本自身的分辨率也没变化，文本和边框就出现了偏移，不再精准贴合。我还观察到几个关键细节：

• 给文本设置line-height:18px，或者去掉根容器的scale:20，这个偏移问题就消失了
• 用开发者工具检查文本的 bounding box，两种场景下显示的尺寸居然不一样：一种是27x16，另一种是55x32，但视觉上显然不可能差一倍
• 我尝试关闭Chrome的硬件加速，问题依然存在；但同样的代码在Firefox里，不管接不接外接显示器都能正常渲染
• 系统是Fedora（Wayland桌面环境），外接显示器的DPI是192，笔记本自带屏是96

我现在不是要找修复方案，而是想搞清楚这种差异的本质：Chrome在不同DPI的多显示器场景下，文本渲染和CSS变换的处理逻辑到底发生了什么变化？为什么缩放和自定义字体的组合会触发这种偏移？

以下是我的代码片段：

<style>
.root { transform-origin: top left; scale: 20 }
span {
  background:red;
  position:absolute;
  opacity:0.3;
  &.horizontal { width:50px; height:1px; }
  &.vertical { width:1px; height:20px; }
}
</style>
<div class="root">
  <span class="horizontal" style="transform: translateY(1.2px);"></span>
  <span class="horizontal" style="transform: translateY(13.1px);"></span>
  <span class="vertical" style="transform: translateX(-0.2px);"></span>
  <span class="vertical" style="transform: translateX(27.4px);"></span>
  Hello
</div>
<!-- REGISTERING FONT BELOW -->
<style>
@font-face {
  src: url('自定义字体文件路径') format('truetype');
  font-family: 'DINNextLTPro-BoldCondensed-1';
}
* { font-family: 'DINNextLTPro-BoldCondensed-1' }
</style>

内容来源于stack exchange