Css Transition Not Firing When Adding Class To Body (firefox)

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

Solution 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