CSS media query display-mode:fullscreen does not work on safari (the css inside the media query never gets applied). Current safari version: Version 14.1.

@media all and (display-mode: fullscreen) {
...
}

Full example here: https://jsfiddle.net/gnbcv6em/3/ It works on chrome but not safari. I've tried triggering fullscreen with the browser's fullscreen keyboard shortcut or by triggering it manually with js, but neither works on safari.

Also, https://developer.mozilla.org/en-US/docs/Web/CSS/@media/display-mode shows that safari supports it.

Perhaps someone has come across this issue and can help?