CSS Transition not firing when adding class to body (Firefox)

Question

I am creating a sticky header on a site that decreases padding of 2 elements once the page starts scrolling. To do so, I add a class to the body tag once scrolling begins and have transitions set up to animate once that class is added. This works fine in webkit browsers but not in firefox? Here is a JSFiddle of the issue. http://jsfiddle.net/5HLyu/11/. Any help is appreciated!

HTML

<body>
<div class="header-wrapper">
    <div class="header">
        Header
    </div>
    <div class="menu">
        Menu
    </div>
</div>
</body>

CSS

body{height:1000px; overflow:scroll; padding:0; margin:0}
.header{background:#00457c; color:#fff; padding:22px 0; text-align:center;
    -webkit-transition:all 250ms ease-out;
    -moz-transition:all 250ms ease-out;
    -ms-transition:all 250ms ease-out;
    -o-transition:all 250ms ease-out;
    transition:all 250ms ease-out;
}
.menu{background:#aaa; padding:22px 0; text-align:center;
    -webkit-transition:all 250ms ease-out;
    -moz-transition:all 250ms ease-out;
    -ms-transition:all 250ms ease-out;
    -o-transition:all 250ms ease-out;
    transition:all 250ms ease-out;
}

.down .header-wrapper{position:fixed; top:0; width:100%; z-index:1000}
.down .header{padding:10px 0}
.down .menu{padding:10px 0}

jQuery

(function($){
    $(window).on("scroll", function() {
        var fromTop = $(window).scrollTop();
        $("body").toggleClass("down", (fromTop > 1));
    });
})(jQuery);

I am unable to replicate this issue in firefox, or anyother brower i know of, are you running the latest version? — Sam Denton, Jun 23 '14 at 15:49
You could try this: http://stackoverflow.com/questions/15499422/css-transition-only-working-in-firefox?rq=1 — Sam Denton, Jun 23 '14 at 15:53
I don't think that thread is similar to this issue. That is trying to animate a pseudo element of an image. This is an issue related to elements not animating in firefox when a class is added — mannr, Jun 23 '14 at 15:59
its not exactly the same question, but the answer is basicaly the same, you will have to find a work-around if the problem persists, as there is nothing "wrong" with your code. — Sam Denton, Jun 23 '14 at 16:00
I don't know one off the top of my head, but I am sure there is a JS solution to creating the same transaction which should be compatible cross browser. If you can wait, then an update will probably be released in the near future giving more compatibility. — Sam Denton, Jun 23 '14 at 16:08
sadly I may have to go the JS route if I can't find an alternative or a fix as this project has a deadline of june 30th. thanks for your help though! — mannr, Jun 23 '14 at 16:33
No problem. Just messing around with your code, I found that the animation works smoother if you change from (250ms ease-out;) to a higher value(for example 1000ms) in all cases. — Sam Denton, Jun 23 '14 at 16:38

score 1 · Accepted Answer · answered Jun 23 '14 at 18:55

1

FF seems to have issues with transitions if you change an elements position

Change this line:

.down .header-wrapper{position:fixed; top:0; width:100%; z-index:1000}

To this:

.header-wrapper{position:fixed; top:0; width:100%; z-index:1000}

(ie. remove the .down selector)

I don't believe this will have any negative effect on your code.

DEMO

answered Jun 23 '14 at 18:55

Turnip

35,836
15
89
111

1

that worked! only thing i had to do was adjust the margin of the next element on the site so that it accounted for the header being outside the document flow. thanks! – mannr Jun 23 '14 at 20:01
1

Cool. You could probably have also added some padding to your `body` – Turnip Jun 23 '14 at 20:04

CSS Transition not firing when adding class to body (Firefox)

1 Answers1

Linked