Bug 254489 – window.matchMedia('( dynamic-range: high )').matches does not reflect HDR capability

• Status: NEW
• Component: Images

[Greg]

The CSS media query and related JS command to query for support of High Dynamic Range (HDR) is returning true when no image can be properly rendered as HDR.

window.matchMedia('( dynamic-range: high )').matches returns true on a computer such as the M1 MacBook Pro.
The CSS media query is similarly affected: @media (dynamic-range: high) { ... }

While such a computer does support high dynamic range, Safari currently does not (support for tone mapping to SDR is coming, but this also does not utilize the HDR capabilities of the monitor: https://bugs.webkit.org/show_bug.cgi?id=245858).

My understanding is that the intent of this media query is to be able to use HDR features, specifically do do things like load an HDR version of a photograph. So reporting true on such a system leads to loading an HDR image which will look clipped or at best tone mapped. Instead, an SDR (standard dynamic range) image such as a JPG is better until Safari is able to render the image as a true HDR. This behavior makes the "( dynamic-range: high )" media query unsuitable for its intended purpose: to be able to create a page which simply and dynamically serves HDR assets when they are useful. 

There is support already in Safari for HDR video and the corresponding "(video-dynamic-range: high)" should be relevant for those needs. Its behavior accurately reflects Safari capabilities as far as I know.

[Radar WebKit Bug Importer]

<rdar://problem/107288535>

[Adam Argyle]

I came here to report that Safari on Desktop properly reports HDR CSS color support via `window.matchMedia('(dynamic-range: high)').matches` but iOS Safari on iPad Air 16.4 and iPhone 14 16.4 do not. They return false, as if they're not a HDR capable display or browser instance, when i can in fact see p3 color support.

This has the effect that when visiting a site I'm making, Safari on iOS is getting SDR colors instead of HDR.