CODEWITHSUNDEEP
javascripthtmlcssfontssafari
Matt Komarnicki
Matt Komarnicki

Reputation: 5422

Safari OS X 10.10.4 Font Weight Issue While Scrolling

I'm facing right now weird problem that so far occurs just in Safari (8.0.7) under OS X (Yosemite 10.10.4). What is the problem? I ahve two menu bars. Both are relative and positioning works fine. The point is that when I scroll, 50 px from top I add class that makes second bar position fixed + top 0. This also works perfectly but... when this class is added I see that font-weight of the target bar is changed to something smaller.

(I'm taking about bar that has items: "Australia", "New Zealand" etc.)

I've recorded my screen: https://www.youtube.com/watch?v=H9_VmXDqqBE. Please watch in HD. Top right. Second bar contains names of some categories. If you will look closer you will see that font weight is changed and names are much more thinner than they should be.

I'm pretty much confident about my code and:

  1. I don't manipulate font-weight explicitly.
  2. This happens just in Safari (OS X)
  3. Chrome and FF work good.

It's a minor issue but I want to learn something new and face it.

Below are some code snippets to give you general preview of the situation.

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

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

CSS for the "blog_categories_container" bar and "sticky_top" class:

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;
}

Can someone give me any hints? Thank you.

Upvotes: 1

Views: 111

Answers (1)

Mike G
Mike G

Reputation: 668

This generally happens when something causes the font smoothing to change (probably when you add/ remove the sticky_top class).

Try adding -webkit-font-smoothing: antialiased; to the nav#blog_categories_container section of your css file.

If that doesn't work try -webkit-font-smoothing: subpixel-antialiased;

Upvotes: 1

Related Questions