858988 - CSS: Gradients with transparency show as black

Status: RESOLVED DUPLICATE of bug 591600

(Core :: Layout, defect)

Description

[David Marland]

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 Safari/537.31

Steps to reproduce:

Create a box with a gradient background from {color} to 'transparent':
#example1{
background: -moz-linear-gradient(top, #FFFFFF 0%,transparent 100%);
        }


Actual results:

The gradient actually goes towards black before becoming transparent.


Expected results:

The gradient should be a white which fades away

This behaviour is mentioned in the spec as being incorrect:
"On the other hand, if a gradient were to incorrectly transition in non-premultiplied space, the colors near "transparent" would noticeably darken to a grayish color, because "transparent" is actually a shorthand for ‘rgba(0,0,0,0)’, or transparent black:"
http://dev.w3.org/csswg/css-images-3/#color-stop-syntax

I have documented this here:
http://hammerspace.co.uk/2012/02/css3-gradients-with-transparency
with a demo here:
http://hammerspace.co.uk/projects/gradient/