Transform translate не работает в Firefox

У меня есть простая функция скрытия показа, которая отлично работает в Chrome и Safari, но скрытый контент не отображается в Firefox. Я искал, но ничего не пробовал, работает. Контент присутствует в источнике просмотра, но, кажется, не скользит вверх. Вот мой код

<div class='faq__item'>
<div class='faq__content'>
    <div class = "faq__wrapper">
        <div class = "faq__slide">
            <h3 class = "faq__title">{{ heading }}</h3>
            <div class = "faq__icon glyphicon glyphicon-menu-down" target = "{{index}}"></div>
        </div>
        <div class = "faq__slide__content" id = "slider{{index}}">
            <p>{{ body }}</p>
        </div>
    </div>
</div>

CSS:

.faq__slide__content {
 height: 0;
 overflow: hidden;
 z-index: -1;
 opacity: 0;
 transform: translateY(40px);
 transition: all 0.5s ease;

 p {
   margin: 0;
 }
}

.show-content {
 .faq__slide__content {
  margin-top: 16px;
  height: auto;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
}

}

jQuery(document).ready(function () {
jQuery(function($){
    $('.faq__wrapper').click(function(){
        if ($(this).hasClass('show-content'))
        {
            $('.show-content').removeClass('show-content');
            $(this).removeClass('show-content');
            $(this).find('.faq__icon').removeClass('glyphicon-menu-up');
            $(this).find('.faq__icon').addClass('glyphicon-menu-down');


        }
        else
        {
            $('.show-content').removeClass('show-content');
            $(this).addClass('show-content');

           $(this).find('.faq__icon').removeClass('glyphicon-menu-down');
           $(this).find('.faq__icon').addClass('glyphicon-menu-up');
        }
    });
  });
});