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

Eric Meyer
Reported 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.
Attachments
rendering in safari, firefox, chrome (1.78 MB, image/png)
2023-11-21 00:17 PST, Karl Dubost 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-11-16 14:46:13 PST
<rdar://problem/118531608>
Karl Dubost
Comment 2 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.
Simon Fraser (smfr)
Comment 3 2025-09-06 19:55:53 PDT
There's still some banding at some saturation levels on macOS Tahoe, but it looks better.
Note You need to log in before you can comment on or make changes to this bug.