javascript - 如何让 Chrome 在 FadeIn() 期间应用字体平滑?

标签 javascript jquery css google-chrome

我有一个大标题,希望在页面加载后逐渐淡入。我正在使用以下 jQuery 代码片段来实现这一目标。

$('#primary').fadeIn(1000);

但是,在过渡期间,Chrome 似乎在效果完成之前不会应用抗锯齿(或字体平滑)。这会在淡入结束并应用字体平滑后产生明显的抖动。 IE、Firefox 和 Safari 都可以正常工作。

就是这两者的区别...

enter image description here

还有这个……

enter image description here

这可以在这里看到:http://jsfiddle.net/68Bmd/

关于如何让 Chrome 在淡入期间应用字体平滑有什么想法吗?

附言我知道我可以禁用字体平滑。这消除了 SCSS ,但它使字体看起来很糟糕。

最佳答案

我试着在标题前面放一个阴影然后淡出,它似乎起作用了。

html:

<div id="container">
    <div id="shadow"></div>
    <h1 id="primary">This is a Title</h1>
</div>

和CSS:

#shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: #fff;
}

http://jsfiddle.net/57x88/1/

关于javascript - 如何让 Chrome 在 FadeIn() 期间应用字体平滑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24353406/

相关文章:

javascript - JQuery按钮事件问题

javascript - 调整外部div大小时如何避免内部div溢出?

javascript - 从 Parse.com 中删除一个对象

javascript - Protractor 使用邮件监听器获取电子邮件 : TypeError: deferred. fulfill 不是函数

php - 如何重用一个 html head 部分?

javascript - 使用 jquery ajax 和 php 时确实很奇怪的错误

javascript - jQuery、jQueryUI(和插件)和 AngularJS - 它们如何组合在一起?

javascript - 处理返回的 Promise 中的异常

javascript - 使用 HTML 和 JavaScript 在页面上实现 "current-position"指示器

jquery - 菜单未作为列表打开