CSS Переход: переходы непрозрачности и видимости не работают на Firefox (работает на Chrome / Safari)

Question

Я пытаюсь создать переход на полноэкранном наложении с полной шириной и полной высотой с неактивными стилями visibility: hidden и opacity: 0. При нажатии на значок гамбургера класс .active добавляется в div и имеет следующие стили: visibility: visible и opacity: 1.

Вот это CSS:

  .overlay {
    position: fixed;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: '#272727';
    z-index: 100;
    transition: visibility 500ms ease, opacity 500ms ease;
    visibility: hidden;
    opacity: 0;
    &.active {
      visibility: visible;
      opacity: 1;
    }
  }

Переход происходит, как и ожидалось, в Chrome и Safari, но «постепенная» часть перехода завершается неудачно в Firefox. Это в основном переход от первого кадра к последнему без перехода. Вот ссылка на страницу, если вы хотите увидеть ее в действии: ссылка на веб-страницу

И видео о том, что происходит, если вы не можете повторить проблему в своем браузере запись экрана :

Почему этот переход не работает на Firefox?

Answer 1

Похоже, что видимость не имеет параметров перехода. Так что переход работает некорректно.

В .bbfIaB эта часть

transition: visibility 500ms ease 0s, opacity 500ms ease 0s;

Изменить на эту

transition: opacity 500ms ease 0s;

ОБНОВЛЕНО

Лучшее решение в этой ситуации будет следующим:

1. Удаление видимости из перехода в CSS.
2. Удаление visibility: hidden; из .bbfIaB
3. Добавить новый css класс, например .hidden {visibility: hidden;}
4. Добавить JavaScript, который добавит .hidden 500 мс после удаления .active
5. Class .hidden должен быть добавлен в шаблон по умолчанию должен быть удален при активации класса .active