FF中的奇怪渲染与转换变换

Question

我正在构建一个可以在单击按钮时扩展的标题。然后，其他内容应从原始标题后面滑入。两个标题都是固定的，因为它们应该与页面一起滚动。要在transition transform上使用带translate3d的CSS，可以平滑地为幻灯片输入/输出设置动画。

这在Chrome和IE中运行良好但在FF中失败。在FF中，渲染是奇数。看起来边框立即被绘制到新位置，然后标题滑入并且边界最终被校正到正确的位置。滑出时也一样。

这种情况发生在Windows 7上的FF 39.0中。相同版本但在Kubuntu Linux上没有显示此行为。在使用top或<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> 属性作为解决方法时，我也遇到了这种情况。

HTML：

#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;
}

CSS：

var opened = false;

document.getElementById("trigger").onclick = function () {
    document.getElementById("slider").className = opened ? "" : "opened";
    opened = !opened;
};

JS：

String

JSFiddle： https://jsfiddle.net/avwhksbw/

那么，这里发生了什么？你能在FF上重现这个奇怪的动画渲染吗？我该怎么办？使用CSS动画？ JQuery的吗

编辑：这是一个显示问题的屏幕截图。滑块打开时会执行此操作。关闭时看起来有点类似。