How Safari Renders HDR Content on Apple XDR Displays

This article provides a comprehensive overview of how the Safari web browser processes and renders High Dynamic Range (HDR) videos and images on Apple’s Extreme Dynamic Range (XDR) displays. It covers the underlying system frameworks like Extended Dynamic Range (EDR), the supported video and image codecs, how Safari blends Standard Dynamic Range (SDR) web elements with bright HDR highlights, and the specific web standards developers use to deliver this content.

The Foundation: WebKit and Extended Dynamic Range (EDR)

Safari’s rendering engine, WebKit, does not handle HDR in isolation. Instead, it relies deeply on Apple’s native operating system frameworks, specifically Core Animation and the Metal graphics API. On devices with XDR displays—such as the Pro Display XDR, MacBook Pro, and iPad Pro—Apple utilizes a technology called Extended Dynamic Range (EDR).

In a traditional SDR environment, brightness values are clamped between 0.0 (black) and 1.0 (maximum standard white). EDR uses a 16-bit floating-point color pipeline that allows pixel values to exceed 1.0. When Safari encounters HDR content, WebKit passes these above-1.0 values to the operating system's compositor. The XDR display then illuminates those specific pixels using its mini-LED backlight or tandem OLED panels, pushing peak brightness up to 1600 nits while keeping standard webpage elements at a comfortable, lower brightness.

HDR Video Playback and Tone Mapping

Safari supports several industry-standard HDR video formats, ensuring broad compatibility across streaming platforms. The browser natively decodes:

  • Dolby Vision (Profiles 5 and 8.4)
  • HDR10 (using the PQ transfer function)
  • Hybrid Log-Gamma (HLG)

These formats are supported within MP4 (HEVC/H.265) and WebM (VP9 and AV1) containers. When a user plays an HDR video in Safari, the browser offloads the decoding process to the Apple Silicon Media Engine. This hardware acceleration ensures smooth playback and minimal battery drain.

During playback, Safari dynamically tone-maps the video's Rec. 2020 color space and brightness metadata to match the exact capabilities of the connected XDR display. If the user changes the ambient lighting in their room or adjusts the display brightness, Safari and the OS recalculate the available "EDR headroom" in real-time, adjusting the HDR highlights so they never clip or look unnatural.

Rendering HDR Images with Gain Maps

Until recently, HDR on the web was mostly limited to video. Safari expanded this to static photography by supporting HDR images in HEIC, AVIF, and updated JPEG formats.

A critical component of Safari's image rendering is its support for Gain Maps. An HDR image with a gain map contains two main parts: a standard SDR base image and a grayscale metadata map. When Safari loads this file on an XDR display, it reads the gain map to determine which pixels need to be brightened and by how much.

This approach is highly efficient because it degrades gracefully. If the user drags the Safari window from a MacBook Pro XDR display to a standard external monitor, Safari simply stops applying the gain map and displays the base SDR image.

Compositing SDR and HDR Together

One of the hardest challenges for a web browser is displaying a blindingly bright HDR image right next to standard black text on a white background. If the entire screen brightened to accommodate the HDR file, the white webpage background would become painfully bright to read.

Safari solves this through independent layer compositing. WebKit separates the webpage into distinct graphical layers:

  1. The SDR Layer: Text, CSS backgrounds, and standard images are locked to "reference white" (often around 100 to 200 nits, depending on user settings).
  2. The HDR Layer: Videos and images tagged with HDR color profiles are placed in their own Metal-backed layers.

The Apple display engine combines these layers at the hardware level. The XDR display's local dimming zones only boost the physical backlight behind the HDR layer's brightest pixels, leaving the adjacent SDR webpage text at a normal, readable luminance.

Web Standards and Developer Detection

Safari uses standard CSS Media Queries to let websites know that it is running on an XDR-capable display. Web developers do not need to write Apple-specific code to trigger HDR rendering; instead, they use the following W3C specifications:

  • dynamic-range: high: Confirms the browser and display combination can render brightness values above standard white.
  • video-dynamic-range: high: Specifically checks if the video plane supports HDR rendering.
  • color-gamut: p3: Confirms the display supports the Wide Color (Display P3) spectrum, which is a prerequisite for accurate HDR color rendering on Apple devices.

When Safari evaluates these queries as true, the website delivers the high-bit-depth video streams or gain-mapped images, allowing the browser to immediately engage the XDR display's full capabilities.