我有一个包含大量弹出窗口的应用，我将它们定位如下：
.popup {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
但有些弹出窗口是模糊的。这种转换：翻译是杀死它的原因。据我所知，这是 chrome 问题，但解决它的最佳方法是什么？
【问题讨论】：
标签： css google-chrome
这不是您代码中的错误，这是众所周知的 Webkit 渲染错误。例如：https://support.mozilla.org/pl/questions/1075185（以及 FF 支持论坛上的更多主题）。
在 Chrome 和 FF 中，您可以在高级浏览器设置中关闭所谓的“硬件加速”。此设置的存在是为了让您的硬件“帮助”浏览器在进行高级图形渲染时。对于您使用翻译和其他一些规则的元素，硬件加速会自动打开。这实际上有时会被没有经验的“超级 css 黑客”用来在某些情况下实现更好/更清晰的渲染。
但有时它弊大于利，这就是你的情况。在浏览器中关闭硬件加速后，字体会非常清晰。遗憾的是，在代码方面没有真正的解决方案，您不能强制为给定元素关闭它。我们依赖 Webkit 开发人员在此处修复渲染引擎。您只能随意修改，例如将字体大小更改为无缘无故呈现更好的字体大小。或者以某种不涉及翻译的方式更改定位。祝你好运。
【讨论】：
你可以在你的 .css 中试试这个：
.myfont{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
【讨论】：