Multiple simultaneous position css transitions not working in IE10

Multiple simultaneous position css transitions not working in IE10

I have three elements in my site's header which animate up to a
'compressed' position when the user scrolls beyond a certain point in the
page. I have some javascript which applies the class 'fixed' to the site's
header at that point:
$(window).scroll(function() {
var w = $(window).scrollTop();
//console.log(w);
if (w < 30) {
$('header').removeClass('fixed');
};
if (w > 40) {
$('header').addClass('fixed');
};
});
The three elements have transitions applied, like this:
#mainnav {
display: block;
position: fixed;
z-index: 1;
width: 100%;
-webkit-transition: top 0.3s ease-out;
-moz-transition: top 0.3s ease-out;
-o-transition: top 0.3s ease-out;
-ms-transition: top 0.3s ease-out;
transition: top 0.3s ease-out;
}
#servicesnav {
display: block;
position: fixed;
width: 100%;
height: 20px;
padding: 0;
color: white;
font-weight: 700;
border-top: 93px solid white;
border-bottom: 20px solid $verydarkgrey;
box-shadow: 0 3px 5px rgba(0,0,0,.3);
-webkit-transition: top 0.3s ease-out;
-moz-transition: top 0.3s ease-out;
-o-transition: top 0.3s ease-out;
-ms-transition: top 0.3s ease-out;
transition: top 0.3s ease-out;
}
#logo {
display: block;
position: fixed;
left: 0;
right: 0;
top: -20px;
z-index: 1;
width: 130px;
height: 130px;
margin: 0 auto;
border-radius: 50%;
box-shadow: 0 0 40px rgba(0,0,0,.1);
background: white;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
and the fixed class changed the top value for each of these, which is what
is animated:
header.fixed {
#mainnav {
top: -20px;
}
#servicesnav {
top: -35px;
}
#logo {
top: -40px;
}
}
In Chrome these animate perfectly, but in IE10 only the logo animates
properly while the two menus jump from their initial position to the
position specified by the fixed class.
Since the logo animates as expected I'm at a loss as to why the other two
don't. The mechanism is identical, as far as I can tell. If it makes any
difference, the logo happens to be an SVG file.
Fiddle here: http://jsfiddle.net/QnJKj/1/
Any help appreciated!