Chrome中的文字模糊，可以解决吗？

Question

我有一个包含大量弹出窗口的应用，我将其定位为：

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

但某些弹出窗口是模糊的。这种转变：翻译是杀死它的原因。据我所知，这是镀铬问题，但是解决它的最佳方法是什么？

Answer 1

这不是代码中的错误，这是众所周知的Webkit渲染错误。参见例如：https : //support.mozilla.org/pl/questions/1075185（以及FF支持论坛上的更多主题）。

在Chrome和FF中，都可以在高级浏览器设置中关闭所谓的“硬件加速”。存在此设置是为了让您的硬件在进入高级图形渲染时“帮助”浏览器。对于使用了translate和其他一些规则的元素，硬件加速会自动打开。有时，经验不足的“超级CSS黑客”有时会使用它来在某些情况下获得更好/更清晰的渲染。

但是有时候它带来的弊大于弊，这就是您的情况。一旦在浏览器中关闭了硬件加速，字体就会非常清晰。遗憾的是，在代码方面没有真正的解决方案，您不能强制为给定元素将其关闭。我们依赖Webkit开发人员在这里修复渲染引擎。您只能四处乱逛，例如将字体大小更改为没有真正原因的更好的字体大小。或者以某种不涉及翻译的方式更改定位。祝您好运。