1917877 - Modal ::backdrop not transitioning

Status: RESOLVED DUPLICATE of bug 1770591

(Core :: CSS Transitions and Animations, defect)

Description

[Nustad]

Steps to reproduce:

    @property --alpha {
        syntax: '<number>';
        initial-value: 0;
        inherits: false;
    }
    dialog::backdrop {
        background-color: rgb(0 0 0 / var(--alpha));
        transition: none;
    }
    dialog.backdropIn::backdrop {
        --alpha: 0.1;
        transition: --alpha 1s ease-in;
    }

Actual results:

Opening a dialog with showModal() and then appending class="backdropIn", instantly shows the ::backdrop, it does not transition as a fade in like it should and how it behaves in Chromium browsers.

Expected results:

The ::backdrop should be fading in gradually. I've also tried using a more standard approach with opacity from 0 to 1, but same issue. It seems Firefox is not animating the ::backdrop element.

It's very frustrating to deal with constant shortcomings of Firefox when developing web applications. Don't get me started on the lack of the File System API support, even as persistent read-only.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::DOM: Core & HTML' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Emilio Cobos Álvarez (:emilio)]

The reason is that ::backdrop is not implemented as an actual element and thus transitions can't be targeted to it right now.