Chrome中的文本模糊，有解决方法吗？

Question

我有一个应用程序，里面有很多弹出窗口，我是这样定位它们的：

.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

但是有些弹窗模糊不清。这个 transform: translate 是造成问题的根源。据我所知，这是 Chrome 的问题，但是最好的解决方法是什么呢？

- Nemanja G

---

请展示一个带有HTML的JSFiddle。 - Siyah

也许尝试一下三维翻译，也许会呈现不同的效果 :) - Medda86

可能是 CSS：transform: translate(-50%，-50％) 使文本模糊的重复问题。 - Aslam

Answer 1

这不是你代码的错误，这是已知的Webkit渲染bug。例如，请参见：https://support.mozilla.org/pl/questions/1075185（以及许多关于FF支持论坛的其他线程）。

在Chrome和FF中，您可以在高级浏览器设置中关闭所谓的“硬件加速”。该设置存在是为了让您的硬件在涉及高级图形渲染时帮助浏览器。硬件加速会自动为您使用翻译和其他规则的元素打开。实际上，有时候经验不足的“超级CSS黑客”会使用它来在某些情况下实现更好/更清晰的渲染。

但是，有时它会带来更多的负面影响，而这就是您的情况。一旦您在浏览器中关闭了硬件加速，字体就变得完美清晰。可悲的是，从代码角度来看，没有真正的解决方法，您无法强制关闭给定元素的硬件加速。我们依赖于Webkit开发人员修复此处的渲染引擎。您只能绕过像将字体大小更改为没有真正原因更好呈现的大小，或更改与转换无关的某种方式的定位。祝你好运。

- Robert Williams

Answer 2

你可以在你的 .css 文件中尝试这个：

.myfont{
-webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

- Guillaume Deschamps