CSS翻译在Safari上无法完全工作

我的应用程序中有一个元素,当我单击某个按钮时,该元素会滑入视图,当我再次单击该按钮时,它会滑出视图。我是用CSS和JS的组合来实现这一点的,它在Chrome和Firefox上运行良好,但在Safari中只能部分运行。

在Safari中,它不会滑入,只是突然出现,但它确实滑出得很好。

如有任何帮助,将不胜感激。提前感谢!

JS小提琴: http://jsfiddle.net/ewLdm75n/20/

以下是CSS:

#testModes {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}

#testModes.testModes-active {
     -webkit-transform: translateY(0);
     transform: translateY(0);
}

以及JS:

$(document).on('click', '.testModesToggle', function() {
    var state = $('#testModes').attr('class');

    if (state === 'testModes-active') {
        $('#testModes').removeClass('testModes-active').delay(100).fadeToggle();
    } else {
        $('#testModes').fadeToggle(0).addClass('testModes-active');
    }

});