html - 文本的 Webkit 不透明度过渡问题

Question

情况:

View the jsFiddle

在 div 中，我有一个图像，后面跟着一个 font-weight 为 900 的文本。在我本地托管的环境中，我使用自定义字体，但对于上面的 fiddle ，我选择了“永远如此时尚”的 Comic Sans 来说明我的观点。在任何事情发生之前，我将整个 div 的不透明度设置为 0.7。但是，将鼠标悬停在 div 上时，我希望所有内容的不透明度都变为完全不透明。

问题:

我注意到仅在 Webkit 浏览器中(在 Chrome 上比在 Safari 上更明显)，将鼠标悬停在 div 标签上时，文本的粗细似乎会发生变化.实际上，文本的权重当然没有任何变化。但是，仔细查看后，您会发现文本仅在悬停时以所需的粗细显示，而不是在非悬停状态下。

我做过的事情:

• 我已经在所有最新版本的 Chrome、Firefox 和 Safari 中对此进行了测试。
• 我目前正在新的 MacBook Pro 上测试这个，在我的例子中，它是一个视网膜屏幕。然而，我旁边的同事在她的 iMac(非视网膜显示屏)上测试了 fiddle ，结果发现问题仍然很明显。
• 也许我只是疯了，但我觉得这实际上可能是 webkit 浏览器选择呈现具有不同不透明度的元素的方式。话又说回来，这可能只是我试图避免承认我做错了什么。

---

自然地，我认为我可以使用 Comic Sans 来减轻气氛。下面是有助于解释问题的屏幕截图:

Answer 1

这不是不透明度本身的问题(事实上，在@Zoltan 的示例中将其调回 1 对我来说没有任何改变)。

问题在于过渡，webkit 可以使用两种抗锯齿模式:

1. 子像素(默认设置，但在动画、过渡或变换期间不受支持)或
2. 灰度

这意味着当使用子像素抗锯齿渲染元素并对其应用动画时，webkit 会在动画持续期间暂时切换到灰度，然后在完成后返回子像素。

鉴于子像素抗锯齿会导致字体稍重，您会得到不需要的伪像。

要解决此问题，请将其添加到您的 CSS 中:

html {
    -webkit-font-smoothing: antialiased;
}

这会强制灰度抗锯齿和所有文本，您将看不到切换。

(最终结果:http://jsfiddle.net/ErVYs/9/)