2015488 - fullscreen img element missing backdrop

Status: VERIFIED FIXED

(Core :: Layout, defect)

Description

[eyal gruss]

Attachment: bad.fs

Bug 2006998 removed ::backdrop on "things like a full-screen<input>, but that seems unlikely"...
well this breaks e.g. fullscreen <img> by leaking the background, and imho the assumption is not reasonable at all, as one could also imagine creative use of other leaf elements as a fullscreen element.

works in chromium.

example code: https://codepen.io/eyaler/pen/pvbQjYq

mozregression:
2026-02-09T15:58:17.353000: DEBUG : Found commit message:
Bug 2006998 - Avoid creating ::backdrop pseudo-elements for leaf frames. r=layout-reviewers,firefox-style-system-reviewers,dshin

This prevents special frames from having unexpected children. This
technically avoids having ::backdrop on things like a full-screen
<input>, but that seems unlikely and consistent with
::before / ::after / ::marker.

Differential Revision: https://phabricator.services.mozilla.com/D277188

Comment 1

[Emilio Cobos Álvarez [:emilio]]

Gah, sorry for missing this. FWIW I did because <img> is already sort-of-special (because it already supports rendering a shadow tree).

But that actually makes it rather easy to support. Other than image boxes, I think the remaining LEAF frames that are accessible to web content miscellaneous form controls (<input> / <progress> / etc).

Curious, I get that fullscreening an image is reasonable. I reckon you'd be fine with us not supporting the "fullscreening a textfield" use case? :)

Comment 2

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

Set release status flags based on info from the regressing bug 2006998

Comment 3

[Emilio Cobos Álvarez [:emilio]]

I guess <iframe> should also support this at the very least.

Comment 4

[eyal gruss]

thanks(In reply to Emilio Cobos Álvarez [:emilio] from comment #1)

Gah, sorry for missing this. FWIW I did because <img> is already sort-of-special (because it already supports rendering a shadow tree).

But that actually makes it rather easy to support. Other than image boxes, I think the remaining LEAF frames that are accessible to web content miscellaneous form controls (<input> / <progress> / etc).

Curious, I get that fullscreening an image is reasonable. I reckon you'd be fine with us not supporting the "fullscreening a textfield" use case? :)

thanks emilio!

i was not yet able to figure out exactly which elements (and under which conditions) are considered "leaf frames" in this context. is there an exhaustive list?

i am testing various elements and found that also <svg> and <textarea> seem to show the issue. also, people (me) some times use form controls to do weird stuff...

Comment 5

[Emilio Cobos Álvarez [:emilio]]

Yeah, <textarea> is expected. Currently all the ones that have LEAF in here would hit this.

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2015488 - Support backdrop on outer <svg> / <iframe> / <img>. r=#layout

Only add exceptions for a few elements that do rely on their frame tree
size (mostly text controls). These are fixable but separate bug at the
very least.

Add reftests for <iframe> and <img>. Also, test all HTML elements in all
writing modes to ensure that they don't trigger assertions.

The <svg> case can't be easily reftested, afaict, because fullscreen
will change the size of the reftest window and <svg> doesn't support
popover.

Comment 7

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2015488 - Add ::backdrop support for text controls. r=#layout

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2015488 - Add support for ::backdrop in <progress> / <input type=range>. r=#layout

Comment 9

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2015488 - Add backdrop support for checkboxes and radio buttons. r=#layout

Comment 10

[Donal Meehan [:dmeehan]]

This is the final week of beta for Fx148.
:emilio, there seems to be a few changes here. Will this be low risk for a beta uplift with little bake time?

Comment 11

[Emilio Cobos Álvarez [:emilio]]

I plan to uplift only the first one.

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/57680 for changes under testing/web-platform/tests

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/6f9253d99acf
https://hg.mozilla.org/integration/autoland/rev/e10a1900b527
Add ::backdrop support for text controls. r=layout-reviewers,dshin

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/27aaafd77890
https://hg.mozilla.org/integration/autoland/rev/173a24dd87f6
Add support for ::backdrop in <progress> / <input type=range>. r=layout-reviewers,dshin

Comment 15

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/ae187c85229e
https://hg.mozilla.org/mozilla-central/rev/e10a1900b527
https://hg.mozilla.org/mozilla-central/rev/173a24dd87f6

Comment 16

[Emilio Cobos Álvarez [:emilio]]

Attachment: Bug 2015488 - Support backdrop on outer <svg> / <iframe> / <img>.

Add exceptions for a few elements that do rely on their frame tree
size (mostly text controls). These are fixable but separate bug at the
very least.

Add reftests for <iframe> and <img>. Also, test all HTML elements in all
writing modes to ensure that they don't trigger assertions.

The <svg> case can't be easily reftested, afaict, because fullscreen
will change the size of the reftest window and <svg> doesn't support
popover.

Original Revision: https://phabricator.services.mozilla.com/D282451

Comment 17

[Phabricator Automation]

firefox-beta Uplift Approval Request

• User impact if declined: Fixes regression introduced in 147.0.3
• Code covered by automated testing: yes
• Fix verified in Nightly: yes
• Needs manual QE test: yes
• Steps to reproduce for manual QE testing: comment 0
• Risk associated with taking this patch: low
• Explanation of risk level: Targetted fix restoring pre-regression behavior.
• String changes made/needed: none
• Is Android affected?: yes

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/bb530e526938
https://hg.mozilla.org/integration/autoland/rev/e2a8b6a85884
Add backdrop support for checkboxes and radio buttons. r=layout-reviewers,firefox-style-system-reviewers,dshin

Comment 19

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/e2a8b6a85884

Comment 20

[Pulsebot]

https://github.com/mozilla-firefox/firefox/commit/9c15f947ca7a
https://hg.mozilla.org/releases/mozilla-beta/rev/22e896b56d5f

Comment 21

[Monica Chiorean]

I was able to reproduce the issue on Win11x64 using Firefox build 147.0.3.
Verified as fixed on Win11x64 using Firefox build 149.0a1(20260210213212). Waiting for beta fix.

Comment 22

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 23

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging

Comment 24

[Monica Chiorean]

Verified as fixed on Win11x64 using Firefox build 148.0b14.

Comment 25

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot

Comment 26

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR was closed without merging