Weird rendering in FF with transition transform - html

Question

I'm building a header that can be extended when clicking a button. Then additional content should slide in from behind the original header. Both header are positioned fixed as they should scroll with the page. To smoothly animate the slide in/out I'm using CSS with transition on transform.
This works fine in Chrome and IE but fails in FF. In FF the rendering is odd. It looks like the border is drawn onto the new position immediatly, then the header slides in and the border in then finally corrected to the correct position. Same on sliding out.
This happens in FF 39.0 on Windows 7. The same version but on Kubuntu Linux does not show this behaviour. I experienced this as well when using translate3d or top properties as workaround.
HTML:
<header id="header">This is the header</header>
<div id="slider">
<div>Slider content goes here</div>
<button id="trigger" type="button">Toggle</button>
</div>
CSS:
#header, #slider {
display: block;
position: fixed;
top: 0;
width: 100%;
height: 50px;
border-bottom: 1px solid black;
}
#header {
background-color: red;
z-index: 10;
}
#slider {
background-color: green;
-webkit-transition: -webkit-transform .5s;
-moz-transition: -moz-transform .5s;
transition: transform .5s;
z-index: 9;
}
#slider.opened {
-webkit-transform: translateY(50px);
-moz-transform: translateY(50px);
transform: translateY(50px);
}
#trigger {
position: absolute;
height: 25px;
bottom: -25px;
right: 20px;
}
JS:
var opened = false;
document.getElementById("trigger").onclick = function () {
document.getElementById("slider").className = opened ? "" : "opened";
opened = !opened;
};
JSFiddle: https://jsfiddle.net/avwhksbw/
So, what's going on here? Are you able to reproduce this weird animation rendering on FF? What could I do about this? Using CSS animations? JQuery?
EDIT: Here is a screenshot that shows the problem. This is taken when the slider opens. Looks kind of similar when closing.