CSS+JS | @media display-mode broken
-
Vivaldi not handling @media display-mode correctly
Bug report form wants me to ask if someone else can confirm first so here we go.
I have a JSFiddle sample at https://jsfiddle.net/15hgqwv0/ .
What I expect to happen: Using either the button to go fullscreen via JS or pressing F11 should cause the box to turn blue.
What actually happens: The box stays red.
I may be doing something wrong because Firefox seems to give the same result as Vivaldi however Edge and Chrome do what I expect.
Regards,
Jon--
ModEdit: Title
-
-
@JonCB I can confirm the CSS issue for Vivaldi 5.6 Stable and 5.7 Snapshot and Daily 5.7.2890 .
Works in Chromium 108.0.5359.125 and Chromium 110 - is a Vivaldi-only bug.My report VB-94106 "Vivaldi ignores CSS media display-mode fullscreen" - Confirmed
-
@DoctorG Strange case. It also fails in Firefox and Opera. Works in Chrome, Edge, Brave.
BUT - if I move the
@media
part before thediv#test
, it also breaks in Chrome, Edge, Brave.<style> @media (display-mode: fullscreen) { div#test {background: blue; width: 200px; height: 200px; } } div#test { background: red; width: 200px; height: 200px; } </style>
UNLESS -
!important
is added to the blue ruleSo that makes me think order is important here, even if it shouldn't be (AFAIK) for @media queries. And browsers seem to handle this kind of randomly. But my knowledge about the spec is not good enough to know if there's a correct way of doing this.
https://stackoverflow.com/a/8792163/202114
One would think @media rules would not care about the order of selectors as they specify totally different scenarios.
So I'd say browser support of doing things this way seems to be quirky at present.
-
@Pathduck No, Edge 108, Firefox 108, Chromium 108 & 110 work. Tested on Win 11 22H2 & Debian 11.6 KDE
Try this in a local html file:
<!DOCTYPE html> <html> <head> <style> div#test { background: red; width: 200px; height: 200px; } @media (display-mode: fullscreen) { div#test {background: blue; width: 200px; height: 200px; } } </style> </head> <body> <div id="test"> asdf </div> </body> </html>
-
Seem JS i broken, too.
In Developer Tools → Console of Chromium 108 in fullscreen mode this gives> window.matchMedia('(display-mode: fullscreen)') MediaQueryList {media: '(display-mode: fullscreen)', matches: true, onchange: null}
In Vivaldi full screen:
> window.matchMedia('(display-mode: fullscreen)') MediaQueryList {media: '(display-mode: fullscreen)', matches: false, onchange: null}
//EDIT: Added this information to tracker.
-
I hope a next 5.7 Update will get the fix.
-
@JonCB
️Fixed in Snapshot 5.8.2936.3