Webkit的不透明度过渡问题与文本(Webkit Opacity Transition Issue

情况：

查看的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:

这不是与透明度本身的问题（事实上，在把它恢复为1 @佐尔坦的例子不为我改变什么）。

问题是与过渡，有WebKit的可以使用两种抗锯齿模式：

亚像素（默认，但在动画，过渡或转换不支持）或
灰度

这意味着，当一个元件被使用子像素抗锯齿渲染并且被施加一个动画它，webkit的临时切换到灰度的动画的持续时间，然后返回到子像素一次完成。

由于在稍重的字型是subixel抗锯齿结果你得到的不想要的神器。

为了解决这个问题，它添加到你的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;
}

文章来源: Webkit Opacity Transition Issues with Text