子像素渲染使文本模糊在Blink引擎中

Question

所以我很确定你们很多人都注意到，几个月前Chromium的人们在非整数像素值时改变了渲染引擎的行为。文本现在似乎很模糊，使用流行的transform: translate3d(-50%, -50%, 0);居中打破了相当多的页面。 （例如：http://eiskis.net）

尽管如此，我还没有在这个平台上找到任何相关的问题，模糊文本的解决方案总是相同的旧版本（-webkit-font-smoothing，translateZ(0)等）实际上没有＆＃ 39;在这种情况下工作。

所以 - 除了使用flexbox之外 - 有没有人知道这种新模糊的方法呢？

Answer 1

而不是transform: translate3d(-50%, -50%, 0);使用transform: translate(-50%, -50%);

如果您可以暂时使用Chrome，请避免将translate3d与Chrome一起使用。通过3d转换，Chrome上已经存在一些已知错误（以及CSS本身的一些错误）。