Animating dialog ::backdrop in Firefox

Question

I'm trying to make the ::backdrop pseudo-element of my dialog component using CSS. I've been able to achieve it on Edge and Chrome, but it seems like Firefox is not correctly applying the transition.

Does anyone know if that's not supported in FF, or my code is just wrong ? The modal itself respects the opacity transition, it's just the ::backdrop pseudo-element that comes up instantly.

This is the code I used for a quick proof of concept:

const dialog = document.querySelector('dialog')
const openBtn = document.querySelector('#openBtn')
const closeBtn = document.querySelector('#closeBtn')

openBtn.addEventListener('click', open)
closeBtn.addEventListener('click', close)


function open() {
  dialog.showModal()
  dialog.classList.add('active')
}

function close() {
  dialog.close()
  dialog.classList.remove('active')
}

dialog {
  opacity: 0;
  transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
}

dialog.active {
  opacity: 1;
}

dialog::backdrop {
  background: black;
  transition: opacity cubic-bezier(0.35, 0, 0.2, 1) 2s;
  opacity: 0;
}

dialog.active::backdrop {
  opacity: 0.8;
}

<dialog>
  <p>test nice</p>
  <button id="closeBtn">close dialog</button>
</dialog>
<button id="openBtn">
  open dialog
</button>

Answer 1

Yes, I checked - it seems that neither transition nor animation for ::backdrop works in firefox.
As an alternative, I suggest set box-shadow to the dialog:

const dialog = document.querySelector('dialog');
const openBtn = document.querySelector('#openBtn');
const closeBtn = document.querySelector('#closeBtn');

openBtn.addEventListener('click', open);
closeBtn.addEventListener('click', close);
dialog.addEventListener('keydown', event => {
  if ( event.key === 'Escape' ){
    event.preventDefault();
    close();
  }
});

function open() {
  dialog.showModal();
  dialog.classList.add('active');
}

function close() {
  dialog.close();
  dialog.classList.remove('active');
}

dialog {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.35, 0, 0.2, 1);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .8);
}

dialog.active {
  opacity: 1;
}

dialog::backdrop {
  display: none;
}

<dialog>
  <p>test nice</p>
  <button id="closeBtn">close dialog</button>
</dialog>
<button id="openBtn">
  open dialog
</button>

P.S. If you want to have animation during closing dialog:

const dialog = document.querySelector('dialog');
const openBtn = document.querySelector('#openBtn');
const closeBtn = document.querySelector('#closeBtn');

openBtn.addEventListener('click', open);
closeBtn.addEventListener('click', close);
dialog.addEventListener('keydown', event => {
    if ( event.key === 'Escape' ){
        event.preventDefault();
        close();
    }
});

function open() {
  dialog.showModal();
  dialog.classList.add('active');
}

function close() {
  dialog.style.pointerEvents = 'none'; /* to prevent events during animation */
  dialog.classList.remove('active');
  setTimeout(() => {
      dialog.close();
    dialog.style.removeProperty('pointer-events')
  }, 2000); /* 2000 - is transition-duration in ms */
}

dialog {
  opacity: 0;
  transition: opacity 2s cubic-bezier(0.35, 0, 0.2, 1);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .8);
}

dialog.active {
  opacity: 1;
}

dialog::backdrop {
  display: none;
}

<dialog>
  <p>test nice</p>
  <button id="closeBtn">close dialog</button>
</dialog>
<button id="openBtn">
  open dialog
</button>