Html 使用transform:translateZ(0)的GPU加速,当颜色为白色时,文本消失

Html 使用transform:translateZ(0)的GPU加速,当颜色为白色时,文本消失,html,css,Html,Css,我的项目在某些方面需要GPU加速来进行快速翻译,但当我在CSS中使用-webkit transform:translateZ(0)激活GPU加速时,我发现颜色变浅,白色字母在任何背景中都完全消失。当我将字母的颜色设置为#CCC或#DDD时,几乎无法观察到 有解决这个问题的办法吗 示例: 好的,我自己解决 经过一个晚上的思考,我发现文本消失和文本颜色变浅的原因可能是由于文本的各向异性或抗锯齿,因此我通过在CSS和woala中添加文本渲染:optimizespeed禁用了各向异性!问题已解决。当使

我的项目在某些方面需要GPU加速来进行快速翻译,但当我在CSS中使用
-webkit transform:translateZ(0)
激活GPU加速时,我发现颜色变浅,白色字母在任何背景中都完全消失。当我将字母的颜色设置为#CCC或#DDD时,几乎无法观察到

有解决这个问题的办法吗

示例:

好的,我自己解决


经过一个晚上的思考,我发现文本消失和文本颜色变浅的原因可能是由于文本的各向异性或抗锯齿,因此我通过在CSS和woala中添加
文本渲染:optimizespeed
禁用了各向异性!问题已解决。

当使用GPU加速与文本呈现相结合时,我们遇到了这个问题:优化易读性。在我们的案例中,一般不声明文本呈现是这个问题的解决方案。

您可能会发现这个问题会随着时间的推移而消失——我怀疑在Chrome的Canary版本中,这个问题可能已经得到了修复。