Re: [csswg-drafts] [css-images-4] Clarifying CSS gradient rendering for edge cases involving "longer hue" interpolation (#11381)

After rethinking, I also agree that it would be better for browsers to fix it, which prevents the specification from getting complicated and reduces the learning cost for users.

Looking back, since all three browsers implemented the specification incorrectly. This led to a misunderstanding by many CSS authors that `in hsl longer hue, red 0 0` could produce gradients.

Thankfully, this feature may not be used by many people at the moment, and it's not too late.

@CGQAQ and I will be working on fixing this in Chrome(See [this patch](https://chromium-review.googlesource.com/c/chromium/src/+/6253537)). And possibly add a **UseCounters** to count exactly how many sites are affected. If necessary, we can issue a warning in the console ⚠️.

In addition, I've collected some data to make it easier to assess the impact.

## Potentially Affected Sites

Here are some real use cases found through GitHub searches:

| Site | CSS | Source Code Link | Screenshot |
| --- | --- | --- | --- |
| [https://dreameduinfo.com/](https://dreameduinfo.com/)<br/>@raselmahmud-coder | `conic-gradient(   from var(--bg-angle) in oklch longer hue,    oklch(0.85 0.37 0) 0 0    )` | [open](https://github.com/raselmahmud-coder/FrontEndDreamEdu/blob/175d068a8c8d8cbaa60e7d18d21177d7bc9ac3c9/src/styles/AnimationCustom.module.css#L42-L45) | ![Image](https://github.com/user-attachments/assets/f5840cb6-e9e8-4d65-8c5e-3835e7d438c9) |
| [https://leanrada.com/htmz](https://leanrada.com/htmz)<br/>@Kalabasa | `linear-gradient(135deg in hsl longer hue, red, red 50%)` | [open](https://github.com/gmh5225/htmz/blob/2c9665db9cd49fe03717f8b21ab884c27c942144/docs/style.css#L319-L326) | ![Image](https://github.com/user-attachments/assets/445be5ea-eb58-473c-9f77-c79948bae3c7) |


## Affected front-end build tools

Starting with [esbuild 0.19.9](https://github.com/evanw/esbuild/blob/main/CHANGELOG-2023.md#0199), support for converting gradients with `in hsl longer hue` to equivalent normal gradients.

```css
/* input */
.test-longer {
  background: linear-gradient(in hsl longer hue, red);
}

/* esbuild output */
.test-longer {
  background: linear-gradient(red, #ffbf00 12.5%, #ffef00, #dfff00 18.75%, #7fff00, #20ff00 31.25%, #00ff10, #00ff40 37.5%, #0ff, #0040ff 62.5%, #0010ff, #2000ff 68.75%, #7f00ff, #df00ff 81.25%, #ff00ef, #ff00bf 87.5%, red);
}
```

Opening [esbuild's test page](https://esbuild.github.io/gradient-tests/) in Firefox 136+, we found that this compatibility is broken.

I can file an issue for `esbuild` at a later date and I believe it will be fixed soon.

![Image](https://github.com/user-attachments/assets/90632b72-ba88-4873-9e09-e1477ea8f37b)

`@csstools/postcss-gradients-interpolation-method` may also be affected, I haven't tested it yet.

-- 
GitHub Notification of comment by yisibl
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11381#issuecomment-2659500463 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 14 February 2025 14:37:53 UTC