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

Question

情况：

查看jsFiddle

在div内部，我有一个图像，后跟文本，其font-weight为900。 在我的本地托管环境中，我使用的是自定义字体，但对于上面的小提琴，我选择了“永远如此时尚”的Comic Sans来说明我的观点。 在发生任何事情之前，我将整个div的不透明度设置为0.7。 然而，在上空盘旋div ，我想要的一切的不透明度来完全不透明。

问题：

我注意到仅在Webkit浏览器中（在Chrome上比在Safari上更明显），在div标签上下移动时，文本的重量似乎会发生变化。 实际上，文本的权重当然没有任何变化。 但是，仔细阅读后，您会看到文本仅在悬停时显示为所需的重量，但不会处于非悬停状态。

我做的事情：

• 我已在所有最新版本的Chrome，Firefox和Safari中对此进行了测试。
• 我正在测试这款新MacBook Pro，在我的例子中，它是一个视网膜屏幕。 然而，我旁边的同事测试了她的iMac（非视网膜显示器）上的小提琴只是为了发现这个问题仍然很明显。
• 也许我只是疯了，但我觉得这实际上可能是webkit浏览器选择渲染具有不同不透明度的元素。 然后，这可能只是我试图避免承认我做错了什么。

---

当然我觉得我可以用Comic Sans来减轻情绪。 这是一个屏幕截图，以帮助解释问题：

Answer 1

这不是不透明度本身的问题（实际上，在@ Zoltan的例子中将其变回1并不会改变我的任何事情）。

问题在于转换，webkit可以使用两种抗锯齿模式：

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

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

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

要解决此问题，请将此添加到您的css：

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

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

（最终结果： http ： //jsfiddle.net/ErVYs/9/ ）

Answer 2

一个可能的解决方案是将不透明度转换为1 ，但是.999 - http://jsfiddle.net/ErVYs/2/

div {
    width: 200px;
    text-align: center;
    opacity: 0.7;
    transition: opacity ease-in 0.25s;
    -webkit-transition: opacity ease-in 0.25s;
    -moz-transition: opacity ease-in 0.25s;
    -o-transition: opacity ease-in 0.25s;
}

div:hover {
    opacity: .999;
}