Chrome 文本在不透明度过渡时变得模糊

Zii*_*iik 5 css transform hover opacity css-transitions

好吧,chrome 上文本模糊的好问题。

我正在创建一个 CSS 下拉菜单,可以在 和 之间切换,visibility: hidden并且文本opacity: 0会稍微模糊。visibility: visibleopacity: 1

Firefox 上不存在此问题。那里的文字很清晰。

你可以看到小提琴:http://jsfiddle.net/swum8rm7/1/

通过删除第 21 行上的过渡,您会发现文本变得清晰。我尝试了各种translateZ诡计backface,但无法让它正常工作。

fir*_*r_1 0

添加 -webkit-font-smoothing: antialiased使文本变得更好(尽管仍然有些模糊)