When I click a button on my app, an element slides into view and then slides out when I click the button again. This is achieved using a combination of CSS and JS. It works perfectly in Chrome and Firefox, but only partially in Safari.
In Safari, the element appears abruptly instead of sliding in, but it does slide out correctly.
Any assistance would be greatly appreciated. Thank you in advance!
JS Fiddle: http://jsfiddle.net/ewLdm75n/20/
Below is the 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);
}
And here is the 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');
}
});