Re: [csswg-drafts] [css-color] "transparent" keyword being a special color value, which resolves to rgba(0, 0, 0, 0) by default?

Summary of the twitter thread:

* My original goal was to make `linear-gradient(white, transparent)` work "as expected" - white gradually fading away. As originally specced, it instead became grayish as it faded, as 'transparent' is actually #0000.  You could fix this by saying `white, #fff0`, but then you still can't easily fade back in with a different color - `white, #fff0, red` will be pinkish at the 3/4 mark. You instead needed to explicitly add two transparent stops with different color, like `white, #fff0 50%, #f000 50%, red`, and now this is a 4-stop gradient rather than the 3-stop that it *looks* like (so it won't animate with other 3-stop gradients).
* I assumed the 'transparent' equivalency was fixed, so I attacked the problem from a different angle, and specified that gradients transition in premultiplied space. `white, transparent` now works properly, as does `white, transparent, red`.
* Downside is that now if you *want* to color-shift as you fade, you can't do it easily. You instead have to add multiple intermediate stops to force it to "curve" in premultiplied space.  (But at least it's easy to figure out - you just manually do the linear interpolation you want to see - `rgba(100%, 100%, 100%, 1), rgba(50%, 50%, 50%, .5), rgba(0,0,0,0)` goes grayish, tho in practice you'll want a few more stops to make it smoother.)
* Further downside is that this doesn't match implementation internals - all the graphics libraries transition in un-premultiplied space, like the spec originally mandated. So to get the premultiplied behavior, browsers have to *internally* add several intermediate steps to "curve" it thru un-premultiplied space. ^_^


After my rant, @fantasai suggested that maybe we could still fix this, and just special-case `transparent` to *normally* resolve directly to `#0000`, but let gradients key off of it specially and do the no-color-change behavior. That way if you explicitly write a transparent color, you *will* get the standard un-premultiplied color shift.  This would allow browsers to switch back to the native behavior of the underlying graphics library, and just special-case "transparent" by turning it into one or two stops.

Thoughts?

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

Received on Thursday, 31 May 2018 21:27:11 UTC