CSS Transition: opacity and visibility transition not working on Firefox (works on Chrome / Safari)

Question

I am trying to create a transition on a full screen overlay that is full width and full height with nonactive styles of visibility: hidden and opacity: 0. When clicking on a hamburger icon, an .active class is added to the div and it has the following styles: visibility: visible and opacity: 1.

Here is the 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;
    }
  }

The transition is occurring as expected on Chrome and Safari but the "fade-in" part of the transition fails on Firefox. It's basically skipping from the first frame to the last frame without transitioning. Here is a link to the page if you want to see it in action: link to webpage

And a video of what is occurring if you are unable to replicate the issue on your browser screen recording:

Why is this transition not working on Firefox?

Answer 1

I think this is due to when the visibility is changed in the transition and seems to display inconsistently between browsers.

This demonstrates your code and for me in Firefox if you toggle the element quickly it does not transition smoothly. This is always how I've done similar transitions and only recently started noticing the problem.

var element = document.querySelector(".element")
var toggle = document.querySelector(".element-toggle")

toggle.addEventListener("click", function(event) {
  element.classList.toggle("active");
});

.element{
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 500ms ease;
}

.element.active{
  opacity: 1;
  visibility: visible;
}

<div class="element">This is a div element</div>

<button type="button" class="element-toggle">Toggle</button>

After reviewing, this is what works for me:

var element = document.querySelector(".element")
var toggle = document.querySelector(".element-toggle")

toggle.addEventListener("click", function(event) {
  element.classList.toggle("active");
});

.element{
  opacity: 0;
  visibility: hidden;
  transition: opacity 500ms ease, visibility 0s ease 500ms;
}

.element.active{
  opacity: 1;
  visibility: visible;
  transition: opacity 500ms ease, visibility 0s ease 0s;
}

<div class="element">This is a div element</div>

<button type="button" class="element-toggle">Toggle</button>