Safari OS X 10.10.4 滚动时出现字体粗细问题

Question

我现在正面临一个奇怪的问题，到目前为止只发生在 OS X (Yosemite 10.10.4) 下的 Safari (8.0.7) 中。问题是什么？我有两个菜单栏。两者都是相对的，定位效果很好。关键是，当我滚动时，距顶部 50 px 我添加了使第二条位置固定 + 顶部 0 的类。这也很有效，但是... 添加此类时，我看到目标的字体粗细bar 变小了。

（我正在考虑包含以下项目的酒吧：“澳大利亚”、“新西兰”等）

我已经录制了我的屏幕：https://www.youtube.com/watch?v=H9_VmXDqqBE。请看高清。右上。第二个栏包含一些类别的名称。如果您仔细观察，您会发现字体粗细发生了变化，并且名称比应有的要细得多。

我对我的代码非常有信心，并且：

1. 我没有明确地操纵字体粗细。
2. 这仅在 Safari (OS X) 中发生
3. Chrome 和 FF 运行良好。

这是一个小问题，但我想学习一些新的东西并面对它。

以下是一些代码 sn-ps，可让您大致了解情况。

$(window).scroll(function()
{
    var top = $(window).scrollTop();

    if (top > 50) {
        $('#blog_categories_container').addClass('sticky_top');
    } else {
        $('#blog_categories_container').removeClass('sticky_top');
    }
});

“blog_categories_container”栏和“sticky_top”类的 CSS：

nav#blog_categories_container.container_white {
    background-color: rgba(0,0,0,0.66);
}

nav#blog_categories_container {
    left: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 50px;
    width: 100%;
    z-index: 1030;
}

nav#blog_categories_container ul {
    float: right;
    margin: 0;
    overflow: auto;
    padding: 0;
}

nav#blog_categories_container ul li {
    float: left;
    overflow: hidden;
    padding: 5px 30px 5px 5px;
    white-space: nowrap;
    position: relative;
    color: #cccccc;
}

nav#blog_categories_container ul li:last-of-type {
    padding-right: 0;
}

nav#blog_categories_container.sticky_top {
    position: fixed;
    top: 0;
}

有人可以给我任何提示吗？谢谢。

Answer 1

这通常发生在某些事情导致字体平滑发生变化时（可能是当您添加/删除sticky_top 类时）。

尝试添加 -webkit-font-smoothing: antialiased; 到您的 css 文件的 nav#blog_categories_container 部分。

如果这不起作用，请尝试-webkit-font-smoothing: subpixel-antialiased;