Search code examples
cssdelaytransitionfont-awesome

Chrome delay on font-awesome icons transition

Inside a navbar I have a delay of FA icons transition effect due to this CSS transition:

.navbar-nav > li > a > p > i {
    font-size: 1.5em;
    transition: all 0.3s ease-out;
}

which is executed after (on Chrome):

.navbar-nav > li > a {
    text-align:center;
    color: #475347 !important;
    transition: all 0.3s linear;
}

The navbar: http://jsfiddle.net/wtpLphw1/

But I need this the transition of .navbar-nav > li > a > p > i for the shrink transition effect of FA icons, when scrolling down the page.

JS:

$(window).scroll(function() {
    if ($(document).scrollTop() > 50) {
        $("nav").addClass("shrink");
    } else {
        $("nav").removeClass("shrink");
    }
});

CSS:

nav.shrink .navbar-nav > li > a > p > i {
    font-size: 1.1em;
}

I don't have this delay issue with Firefox or Edge.

But it's because Chrome execute first the transition of .navbar-nav > li > a and then the transition of .navbar-nav > li > a > p > i. We can see it clearly on Chrome with this fork having 1.3 sec for the first transition: https://jsfiddle.net/767psdwt

Any idea? Thanks.

Solution

  • If I understood you correctly, you don't have to create an animation on text and icon separately, just delete this:

    .navbar-nav > li > a > p > i {
    font-size: 1.5em;
    /*transition: all 0.3s ease-out;*/
}

    I also decreased your animation duration, just fyi.

    To keep the animation of font scaling, use this:

    transition: font-size 0.3s ease-out;

    https://jsfiddle.net/767psdwt/1/