Html 当具有“transform:translate”且文本与具有动画的另一个元素相邻时，文本将模糊

在下面的示例中，当应用了

transform:translate

CSS时，包含一些文本的DIV（示例a）会变得稍微模糊

而在文本示例B中，字体是锐利的

这个问题只在Google Chrome上出现，在FireFox 46.0.1上运行良好。 我能够在以下设备上复制它：

• 谷歌Chrome 51.0.2704.84M版
• 谷歌浏览器版本53.0.2768.0金丝雀（64位）

我想知道，我的代码是否有问题，或者是Chrome中的错误

另外，如果可能的话，任何解决这个问题的想法都是受欢迎的，考虑到这一点，我希望保持

transform:translate

，我主要针对最新的Chrome和FireFox

关于我目前注意到的事项：

• 模糊效果在不同字体大小的不同级别发生
• 使用

  webkit字体平滑：无没有帮助

• 任何字体（系统默认或自定义）都会出现问题
• 我正在使用windows8.1

---

以下是一份：

#测试{
位置：固定；
字体大小：20px；
最高：60%；
左：40%；
}
#splashScreen_uu旋转器{
位置：固定；
最高：50%；
左：50%；
转换：转换（-50%，-90px）；
宽度：50px；
高度：50px；
}
#splashScreen\uuu信息{
位置：固定；
字体大小：20px；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-webkit字体平滑：无；
}
.装载机{
宽度：继承；
身高：继承；
边框：5px实心#3498db；
边框顶部颜色：rgba（0,0,0,0）；
左边框颜色：rgba（0,0,0,0）；
边界半径：50%；
动画：自旋生成0.7s无限线性；
}
@关键帧自旋生成{
从{
变换：旋转（0度）；
}
到{
变换：旋转（360度）；
}
}

A） -我们正在加载您的网站。请稍等。
B） -我们正在加载您的网站。请稍等。

这不是代码中的错误，这是众所周知的Webkit渲染错误。请参阅示例：（以及FF支持论坛上的更多线程）

在Chrome和FF中，在高级浏览器设置中，您可以关闭所谓的“硬件加速”。此设置用于在高级图形渲染时让您的硬件“帮助”浏览器。对于使用

translate

和其他一些规则的元素，硬件加速会自动启用。在某些情况下，缺乏经验的“css黑客”有时会使用这种方法来实现更好/更清晰的渲染

---

但有时它造成的坏的比好的多，这就是你的情况。在浏览器中关闭硬件加速后，字体将非常清晰。遗憾的是，在代码方面没有真正的解决方案，您无法强制关闭给定元素的解决方案。我们依赖于Webkit开发人员在这里修复渲染引擎。您只能随意改变，例如将字体大小更改为一个没有真正原因的更好的字体。或者以不涉及翻译的方式改变定位。祝你好运。

是否尝试添加此内容<代码>-webkit字体平滑：无@PascalGoldbach我尝试了但没有成功。我发现这个问题。你尝试过这个吗？看看这个，它可能会帮助你：@PascalGoldbach谢谢，但不幸的是-webkit背面可见性：隐藏；感谢你提到这个错误，这是行不通的。