1288575 - getComputedStyle() returns incorrect value of rgba color animations

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[Hiroyuki Ikezoe (:hiro)]

Attachment: test case

Attaching file has an animation from rgba(0, 0, 0, 0) to rgba(0, 255, 0, 1).  In the halfway of this animation, getComputedStyle() should return rgba(0, 128, 0, 0.5), but actually it returns rgba(0, 255, 0, 0.5).

Comment 1

[Brian Birtles (:birtles, Feb 26~ parental leave)]

I think this is the correct result because interpolation happens in premultiplied color space. For what it's worth, Chrome and Edge give the same result (using modified test case that doesn't require getAnimations: http://jsbin.com/kijapipufu/1/edit?html,css,js,console,output)

Comment 2

[Brian Birtles (:birtles, Feb 26~ parental leave)]

The comment could be updated, however, now that the CSS spec has been updated to require using premultiplied color space:

https://drafts.csswg.org/css-transitions/#animtype-color

Comment 3

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Hiro, can we close this as INVALID? Do you agree?

Comment 4

[Hiroyuki Ikezoe (:hiro)]

Attachment: RGBA animation and rgb with opacity animation

Unfortunately I can't agree.
Here is an example having two animation.  One is rgba(0,0,0,0) to rgba(0,255,0,1), another is rgb(0,0,0) opacity:0 to rgb(0,255,0) opacity 1.

I think both of animations should look the same, but actually not because of 	premultiplication.

I read the original message[1] which raised premultiplication issue.

[1] https://lists.w3.org/Archives/Public/www-style/2009Jul/0048.html

I am having the impression that dbaron seemed to think animation from 'transparent' to other color is the problematic case.

So I think the real problem is the definition of transparent.

From Color Module Level 3[2];

 This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value. 

IMO, transparent should be underlying color but with 0 alpha component for animations. e.g, rgba(255,0,0,0) on red color.

[2] https://www.w3.org/TR/css3-color/

Comment 5

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I agree that this should be INVALID.

Comment 6

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Hi Hiro, I don't dbaron's message was only concerned with the 'transparent' keyword but that there were a number of other cases of transparency of that intuitively (visually?) might be expected to behave the same but don't without premultiplied alpha.

This has been discussed at length in the CSSWG (see minutes and thread starting at [1]) where it was resolved to used pre-multiplied color when interpolating for both animations and gradients.[2]

I don't quite understand how your proposal works (I think we'd need to do something special where we no longer interpolate between computed values but somehow reflect the 'transparent' specified value as a special value? Or would 'transparent' be a computed value?) but in any case I think it is a hard sell. We have at least 3 implementations that agree on this (I couldn't test Safari) so you'd have to demonstrate a significant improvement to justify changing all the implementations and risk adversely affecting content. (I also happen to think that the premultiplied version in attachment 8778073 [details] looks better!) Sorry!

[1] https://lists.w3.org/Archives/Public/www-style/2012Nov/0262.html
[2] https://drafts.csswg.org/css-images/#color-stop-syntax

Comment 7

[Hiroyuki Ikezoe (:hiro)]

Attachment: RGBA animation and rgb with opacity animation

(In reply to Brian Birtles (:birtles) from comment #6)
> content. (I also happen to think that the premultiplied version in
> attachment 8778073 [details] looks better!) Sorry!

If the animation starts from 'transparent', the premultiplied version looks nice, but actually the animation starts from rgba(0,0,0,0) = black opacity, it should be animating more blackish color in the beginning. 

Given that body color is black?

Comment 8

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Hiro, do you still think this is not INVALID?

Comment 9

[Hiroyuki Ikezoe (:hiro)]

Sure.  I want both of animations in attachment 8778128 [details] to be animated the same.

Comment 10

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Are you suggesting we stop using pre-multiplied color, despite the fact that this is implemented consistently cross-browser and has been discussed at length in the CSS WG? Or something else?

For what it's worth, we'll possibly add some facility in the future to specify the interpolation space for colors (SVG already has color-interpolation-filters for this) and perhaps at that point we could add a value to perform interpolation in non-premultiplied RGBA. Until then, I don't think having rgb() + opacity and rgba() interpolate differently is too bad.

Comment 11

[Hiroyuki Ikezoe (:hiro)]

(In reply to Brian Birtles (:birtles) from comment #10)
> Are you suggesting we stop using pre-multiplied color, despite the fact that
> this is implemented consistently cross-browser and has been discussed at
> length in the CSS WG? Or something else?

No. I think the spec should be changed.

> For what it's worth, we'll possibly add some facility in the future to
> specify the interpolation space for colors (SVG already has
> color-interpolation-filters for this) and perhaps at that point we could add
> a value to perform interpolation in non-premultiplied RGBA. Until then, I
> don't think having rgb() + opacity and rgba() interpolate differently is too
> bad.

It will be great if we can such facility. 

I found another bug report related to premultipication. Bug 1288575.  It's essentially same to me.

Comment 12

[Hiroyuki Ikezoe (:hiro)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #11)
 
> I found another bug report related to premultipication. Bug 1288575.  It's
> essentially same to me.

Recursive!  The correct one is bug 1241717.

Comment 13

[Brian Birtles (:birtles, Feb 26~ parental leave)]

(In reply to Hiroyuki Ikezoe (:hiro) from comment #11)
> (In reply to Brian Birtles (:birtles) from comment #10)
> > Are you suggesting we stop using pre-multiplied color, despite the fact that
> > this is implemented consistently cross-browser and has been discussed at
> > length in the CSS WG? Or something else?
> 
> No. I think the spec should be changed.

Yes, I understand that. I think that's going to be very difficult--we have interop on all browsers (I checked Safari, Edge, Chrome), and the CSS WG has already discussed this topic at length and decided to use premultiplied color. You will need a very persuasive argument to get the spec changed (and all existing implementations). If you think that's worth doing, then please file a bug on the spec.[1]

I'm going to mark this as invalid for now. Let's re-open it if the spec changes.

[1] https://github.com/w3c/csswg-drafts/issues