Bug 156105 - Linear-gradient from solid color to transparent rendering with black
Summary: Linear-gradient from solid color to transparent rendering with black
Status: RESOLVED DUPLICATE of bug 150940
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 9
Hardware: Mac OS X 10.11
: P2 Major
Assignee: Nobody
URL: http://codepen.io/juwain/pen/bpeNpy
Keywords: HTML5
Depends on:
Blocks:
 
Reported: 2016-04-01 03:52 PDT by zyuzin.vitaly
Modified: 2016-04-01 14:34 PDT (History)
2 users (show)

See Also:

Attachments
linear-gradient from white to transparent goes through black (13.09 KB, image/png)
2016-04-01 03:52 PDT, zyuzin.vitaly 		no flags Details
View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description zyuzin.vitaly 2016-04-01 03:52:42 PDT 
Created attachment 275393 [details]
linear-gradient from white to transparent goes through black

http://codepen.io/juwain/pen/bpeNpy

1. Create a block.
2. Set background-image: linear-gradient(to right, white, transparent) to it.

Actual behavior:
White color becomes gray and the transparent.

Expected behavior:
White color smoothly turns into transparent.

Check specification https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax 

Example 23.

In premultiplied space, transitions to or from "transparent" always look nice.
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.
Comment 1 Simon Fraser (smfr) 2016-04-01 08:54:24 PDT 
Because we interpolate with non-premultiplied colors.
Comment 2 Simon Fraser (smfr) 2016-04-01 13:13:13 PDT 

*** This bug has been marked as a duplicate of bug 150940 ***
Comment 3 zyuzin.vitaly 2016-04-01 14:34:19 PDT 
OK. Thanks, sorry for bothering.