CSS: Gradients with transparency show as black

RESOLVED DUPLICATE of bug 591600

Status

()

Core
Layout
RESOLVED DUPLICATE of bug 591600
5 years ago
5 years ago

People

(Reporter: David Marland, Unassigned)

Tracking

Trunk
x86_64
Windows 8
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

5 years ago
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/
Component: Untriaged → Layout
Product: Firefox → Core
Status: UNCONFIRMED → RESOLVED
Last Resolved: 5 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 591600
You need to log in before you can comment on or make changes to this bug.