html - 在 Chrome 中翻译后字体看起来模糊

Question

EDIT 2016-07-04(因为这个问题越来越受欢迎):This is a bug in Chrome .开发商是actively working on a fix .

EDIT 2017-05-14 该错误似乎已修复，修复将在 Chrome 60 中引入

EDIT 2018-05-04 已合并修复，但 the bug still appears to be present .

所以我有一个非常难看的窗口，它通过这个 CSS 居中在屏幕上:

.popup
{
   position: fixed;
   top: 0;
   bottom: 0;

   transform: translate(-50%, -50%);
}

然而，在 Chrome 上它看起来像这样(字体看起来真的很模糊):

但是在 Firefox 上是这样的:

当我删除 transform 规则时，文本看起来又漂亮又清晰，但它不再正确居中。

当我转到 chrome://flags 并执行 #disable-direct-write 时，它看起来更好，但用户显然不会那样做，它也不会'解决问题。

如何让我的字体看起来更漂亮，同时让窗口居中？

我的 chrome 版本是 44.0.2403.155

我有一个使用 WebGL 在背景 Canvas 上呈现的 three.js 演示。当我禁用演示时，问题不再出现。

JSFiddle with the background .

JSFiddle without the background .

Answer 1

来自相关讨论的建议为我解决了这个问题:https://stackoverflow.com/a/46117022/7375996

在我的案例中，使用带有一些偏移量的 calc 解决了这个问题:

transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));