Bug 264521

Summary: Color banding at the edges of color spaces
Product: WebKit Reporter: Eric Meyer <eric>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Minor CC: karlcow, m_dubet, simon.fraser, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari Technology Preview   
Hardware: Mac (Apple Silicon)   
OS: macOS 14   
URL: https://meyerweb.com/eric/tools/color-spaces/saturation.html
Attachments:
Description Flags
rendering in safari, firefox, chrome none

Description Eric Meyer 2023-11-09 14:45:30 PST 
On https://meyerweb.com/eric/tools/color-spaces/saturation.html, you can see the HSL and HWB color spaces have different apparent color to other gradients on the page.  okLCH in particular has strange color bands where the color should not be banded.  The boxes are constructed by creating 100 `div` element, each a couple of pixels tall, that use a linear gradient from `hsl(270deg 100% 50%)` to `hsl(270deg 100% n)`, where _n_ is a percentage from 1 to 100.

Furthermore, if you drag the slider up from 0%, the banding in okLCH will shift, and banding will occur in both HSL and HWB.  It seems like color calculations are failing art the edges of the color spaces, but I'm not expert enough to know how or why.

Compare to Chrome Canary, which used to act in somewhat similar ways, but does not as of recent builds; I tested in Version 121.0.6117.0 (Official Build) canary (arm64) before filing this bug.
Comment 1 Radar WebKit Bug Importer 2023-11-16 14:46:13 PST 
<rdar://problem/118531608>
Comment 2 Karl Dubost 2023-11-21 00:17:42 PST 
Created attachment 468704 [details]
rendering in safari, firefox, chrome

Eric, Thanks.

This has very different renderings depending on the browser. 
Firefox has also probably performance issues.