css.at-rules.media.display-mode - "fullscreen" keyword doesn't work in Opera PC

[Nekstati]

What type of issue is this?

Browser bug (a bug with a feature that may impact site compatibility)

What information was incorrect, unhelpful, or incomplete?

MDN says Opera fully supports the "display-mode" feature. Actually Opera doesn't understand at least "@media (display-mode: fullscreen)" rule.

What browsers does this problem apply to, if applicable?

No response

What did you expect to see?

/

Did you test this? If so, how?

Tested in Opera One 116 & 118 Stable (Windows 10 x64 & Windows 11 x64).

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

No response

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode

MDN metadata

MDN page report details

• Query: css.at-rules.media.display-mode
• Report started: 2025-04-30T20:17:09.412Z

[caugner]

@Nekstati Can you please provide a minmal example with screenshots? Does it just not work in Opera, or also not in Chrome?

[Nekstati]

@caugner I don't think this will be clearly visible in screenshots.

I created a simple HTML file containing @media (display-mode: fullscreen) { body { background: yellow; } }. Then I opened it in Firefox, Chrome, Edge, Opera (Windows 10 x64) and switched the browsers to fullscreen and back. Then I uploaded the file to a remote HTTPS server and ran the test again with the same results. The background turns yellow in fullscreen in all browsers except Opera.

I recently also ran this test on mobile browsers (Android 15):
Firefox +
Soul (WebView-based) +
XBrowser (WebView-based) +
Opera -
Edge -
Chrome -
MDN says about Firefox: "Only supports the 'browser' value", about Chrome, Opera and WebView: "Full support", so the MDN information related to Android is only true for WebView.

Note that I only tested the "fullscreen" value of this CSS rule. No support for this value means no "full support" for the rule.

Here is the test file: https://gist.github.com/Nekstati/fc188acc3faba9299d6662ac6ad62d62

Also this issue can be easily tested in a browser on a random webpage by pressing F12 and pasting a CSS line shown above.

[caugner]

Thanks, I was able to reproduce, and found this Chromium issue: https://issues.chromium.org/issues/40831406

What we should do here is to add a subfeature for the fullscreen value similar to the following:

browser-compat-data/css/at-rules/media.json

Lines 575 to 577 in 91d1014

	"picture-in-picture": {
	"__compat": {
	"description": "`picture-in-picture` value",

I tested with BrowserStack Live and this test:

• ✅ Firefox 47 (shipped display-mode), supports the fullscreen value.
• ❌ Chrome 46 does not support it, but ✅ Chrome 47 support the fullscreen value.
• ❌ Opera 118 does not appear to support it.
• ❌ Safari 18.4 and Safari 18.4 for iOS don't appear to support the fullscreen value, which is confirmed by bug 216395, even though bug 180376 and this commit suggest display-mode itself is supported (see also: all WebKit issues about display-mode). Bug 264218 in particular suggests it's only supported in PWAs.

So here's how we should set the support values for this new subfeature:

• chrome: version_added: "47"
• chrome_android: version_added: false and impl_url: "https://crbug.com/40831406"
• firefox: version_added: "47"
• firefox_android: version_added: false
• opera: version_added: false
• safari: version_added: false and impl_url: "https://bugs.webkit.org/show_bug.cgi?id=216395"
• safari_ios: version_added: false (will be replaced by "mirror")

Additionally, we should probably set the parent feature (display-mode) to partial_implementation for chrome_android (with the same notes as firefox_android), and safari (safari_ios continues to mirror), as the feature doesn't seem to behave sufficiently to be usable.

@Nekstati Would you like to open a PR with these changes? 🙏 (Please let me know if you have any questions.)