CSS `color(display-p3 …)` renders as sRGB on iOS WebKit

Each row shows the same intended color three ways, edge to edge. On a healthy P3 display the left (CSS) cell should match the middle (P3 image) cell, and the right (sRGB) cell should look duller where the color exceeds sRGB. On the affected iOS WebKit, the left (CSS) cell instead collapses onto the right (sRGB) cell — proving color(display-p3) is painted in sRGB even though the same color renders wide-gamut as an image.

reading device capabilities…

How to read this

Left = CSS — background: color(display-p3 r g b), no sRGB fallback in the declaration. Plain div, no compositing layers.
Middle = P3 image — a PNG whose raw pixels are the P3-native bytes (value×255) with the system Display P3 ICC profile embedded (inlined as a data-URI). This is the ground truth the panel can show.
Right = sRGB — the same color projected/clamped into sRGB and written as a hex value.

Why a screenshot still works as evidence

A screenshot color-manages each region into a Display-P3-tagged PNG, so any single swatch looks fine when viewed later. But the relationship between the three cells survives: on the affected device the left cell stays identical to the right cell and differs from the middle cell. To verify numerically: screenshot this page, open the yellow-green row, and sample the blue channel of the left (CSS) cell — B ≈ 0 means P3 rendered correctly; B ≈ 82 means the sRGB fallback was painted.

CSS color(display-p3 …) renders as sRGB on iOS WebKit

How to read this

Why a screenshot still works as evidence

CSS `color(display-p3 …)` renders as sRGB on iOS WebKit