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

Question

情况:

查看jsFiddle

在div我的内部有一个图像,后跟文本,其上有font-weight900.在我的本地托管环境中,我使用的是自定义字体,但对于上面的小提琴,我选择了"永远如此时尚"的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;
}