[css-images-4] Add the use of “longer” hue interpolation for the color wheel in the example #11755
Conversation
…r wheel in the example Fix w3c#1222
yisibl
force-pushed
the
add-hue-interpolation-demo
branch
from
a75f3e6 to
977edc9
Compare
|
@tabatkins @LeaVerou PTAL |
|
yisibl marked as non substantive for IPR from ash-nazg. |
| width: 200px; height: 200px; | ||
| </pre> | ||
|
|
||
| <img src="images/conic5.png" alt="color wheel"> |
There was a problem hiding this comment.
There are some differences between the current image (left) and the CSS rendering(Chrome 133), should we update the image?
There was a problem hiding this comment.
Yes, we should.
The rendering in Firefox (on Win, at least) also shows a rendering bug, but that is a separate issue
There was a problem hiding this comment.
@svgeesus You wrote:
The rendering in Firefox (on Win, at least) also shows a rendering bug, but that is a separate issue
It looks OK to me on my Windows machine. Could you clarify what rendering bug you're seeing, please? (Or file a bug at https://bugzilla.mozilla.org with details.) Thanks!
There was a problem hiding this comment.
Yes, we should.
@svgeesus Okay, I'll modify it.
There was a problem hiding this comment.
It looks OK to me on my Windows machine. Could you clarify what rendering bug you're seeing, please?
https://codepen.io/svgeesus/pen/KwKzgQE
Nightly 137.0a1 (2025-02-26) (64-bit) Windows 11
Bug filed: https://bugzilla.mozilla.org/show_bug.cgi?id=1951113
| width: 200px; height: 200px; | ||
| </pre> | ||
|
|
||
| <img src="images/conic5.png" alt="color wheel"> |
There was a problem hiding this comment.
Yes, we should.
The rendering in Firefox (on Win, at least) also shows a rendering bug, but that is a separate issue
| <pre class=lang-css> | ||
| background: radial-gradient(closest-side, gray, transparent), | ||
| conic-gradient(in hsl longer hue, red 0 100%); | ||
| transform: scaleX(-1); |
There was a problem hiding this comment.
This is weird, we should just flip the image instead and go with a standard rainbow.
There was a problem hiding this comment.
There are a lot of color pickers that use a counterclockwise rainbow, can we consider adding a related keyword to the gradient to change the direction of rotation?(I can file a new issue.)
That way we no longer need scaleX(-1).
There was a problem hiding this comment.
You can always just reverse your color stops. That won't work for this particular rainbow example (you'll have to add some additional stops instead), but that's fine; using longer hue specifically to generate rainbows is something that's neat but not intentionally supported as a feature.
Fix #1222