【问题标题】:Chrome text gets blurry on opacity transitionChrome 文本在不透明度过渡时变得模糊
【发布时间】:2015-03-24 05:09:52
【问题描述】:

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

我正在创建一个 CSS 下拉菜单,该菜单从 visibility: hiddenopacity: 0 过渡到 visibility: visibleopacity: 1,文本会稍微模糊。

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

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

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

【问题讨论】:

  • 它对我来说很锋利,我正在使用铬。
  • 我可能是个完美主义者,但请看这里:i.imgur.com/wLRgEF9.png 我将font-size 提高到20px。右边的文字有些模糊(不是“悬停我”,下面的线条)。
  • 不是字体模糊(我算过像素),而是它的对比度较低。
  • 嘿,我也有同样的问题。你解决了吗?
  • 仍然没有,到处搜索,仍然..

标签: css hover transform css-transitions opacity


【解决方案1】:

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

【讨论】:

    猜你喜欢
    • 2015-11-11
    • 2015-07-18
    • 2015-03-28
    • 2012-04-25
    • 2014-01-14
    • 2012-08-06
    • 1970-01-01
    • 2018-11-06
    • 2021-07-26
    相关资源
    最近更新 更多