1770591 - Support all pseudo-elements in web animations. (was: Element.animate: '::backdrop' is an unsupported pseudo-element.)

Status: NEW

(Core :: CSS Transitions and Animations, defect)

Description

[Tyler Gross]

Attachment: Firefox Bug.gif

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:100.0) Gecko/20100101 Firefox/100.0

Steps to reproduce:

Tried to animate the ::backdrop element of an HTML dialog.

Stackblitz showing this in action:
https://stackblitz.com/edit/typescript-rdpwyk?file=index.html,index.ts,style.css

Actual results:

Uncaught (in promise) DOMException: Element.animate: '::backdrop' is an unsupported pseudo-element.

Expected results:

The backdrop element should have been animated in. Works in Safari and Chrome.

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

[Tyler Gross]

Looks like this might be related to https://bugzilla.mozilla.org/show_bug.cgi?id=1615469

Comment 3

[Boris Chiou [:boris]]

IIRC, Firefox doesn't support backdrop pseudo-element for animations. Only ::before, ::after, and ::marker now.

Comment 4

[mert.akinc]

Would be great to see this fixed.

Comment 6

[Connor Pearson]

Should this bug also be linked as a duplicate? https://bugzilla.mozilla.org/show_bug.cgi?id=1725177