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

Posted 2023-03-06

【中文标题】Chrome 文本在不透明度过渡时变得模糊

【英文标题】：Chrome text gets blurry on opacity transition

【发布时间】：2015-03-24 05:09:52

【问题描述】：

好的，Chrome 上的文本模糊问题。

我正在创建一个 CSS 下拉菜单，该菜单从 visibility: hidden 和 opacity: 0 过渡到 visibility: visible 和 opacity: 1，文本会稍微模糊。

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

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

通过删除 第 21 行 上的过渡，您会看到文本变得清晰。我尝试了各种translateZ 和backface 的恶作剧，但都无法正常工作。

【问题讨论】：

它对我来说很锋利，我正在使用铬。

我可能是个完美主义者，但请看这里：i.imgur.com/wLRgEF9.png 我将font-size 提高到20px。右边的文字有些模糊（不是“悬停我”，下面的线条）。

不是字体模糊（我算过像素），而是它的对比度较低。

嘿，我也有同样的问题。你解决了吗？

仍然没有，到处搜索，仍然..

【参考方案1】：

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