我可以使用 3D 转换并仍然获得清晰的文本吗？

Question

我想使用 CSS 属性 perspective 和 transform 进行简单的 3D 转换。但我仍然希望至少为那些变换仅描述缩放而没有任何旋转或扭曲的元素获得最佳视觉质量。

举个例子，下面的代码描述了四个包含一些文本的div。我使用 3D 转换来放大它们。我希望它们都清晰，但在我的系统中，有些不是 (Screenshot)。

#outer {
  perspective: 1000px;
  perspective-origin: top left;
}

#sharp_far {
  width: 845px;
  transform: translateZ(500px);
}

#blurry_far {
  width: 846px;
  transform: translateZ(500px);
}

#sharp_close {
  width: 361px;
  transform: translateZ(750px);
}

#blurry_close {
  width: 362px;
  transform: translateZ(750px);
}

<div id="outer">
  <div id="sharp_far">
    Foo
  </div>
  <div id="blurry_far">
    Foo
  </div>
  <div id="sharp_close">
    Foo
  </div>
  <div id="blurry_close">
    Foo
  </div>
</div>

该示例应该说明结果如何取决于元素的转换和原始宽度。我的浏览器是 Chrome 版本 89.0.4389.114，在 Windows 10 上运行。一个 CSS 像素单位正好映射到我屏幕上的一个像素。在其他系统上，效果可能会有所不同。我也在 Firefox 中尝试过，一旦您将 perspective 设置为任何类型的转换，质量似乎都会受到影响。

一个潜在的解决方案是不设置 perspective 而是使用 scale 转换，如 Enso IDE 的 this pull request 中所示。但这对于我们的用例来说还不够好，因为在某些情况下我们可能需要真正的 3D 转换。

除了解决方案之外，我还有兴趣了解 Chrome 究竟是如何选择渲染方法的。