890497 - Incorrect blending of multiple linear-gradients as background-images

Status: RESOLVED DUPLICATE of bug 591600

(Core :: Graphics, defect)

Description

[Louis-Rémi BABE]

Reduced test-case: http://jsfiddle.net/xNEFZ/

I've included the -webkit- prefixed version of the gradient to outline the difference.

Note: This can be easily worked around by using a single gradient.

Comment 1

[Milan Sreckovic [:milan] (needinfo for best results)]

Can you give a bit more details as to what is wrong in the blending? The blend looks like the combination of the two - perhaps you can attach images of the results and point to what's not right?

The webkit version does look different in the individual (and thus blended result.) Because the angle argument isn't interpreted correctly in webkit (at least, in Safari), you would need to rotate and mirror for the two to match:

#gradient {
    width: 100%;
    height: 200px;
    background-image: -webkit-linear-gradient( -45deg, #D7EFE7, transparent 45% ),
		      -webkit-linear-gradient( 135deg, #F7EF8F, transparent 45% );
    background-image:         linear-gradient( 135deg, #D7EFE7, transparent 45% ),
		              linear-gradient( -45deg, #F7EF8F, transparent 45% );
}

Comment 2

[Louis-Rémi BABE]

Attachment: Different rendering in Firefox Nighlty and Chrom Dev

I've attached a screenshot of what I'm seeing. I'm on Ubuntu.

Comment 3

[Erwin Dokter]

Confirmed on Windows XP with Firefox 27.

I just experienced this bug myself. It triggers when a transparent stop is used, either with the keyword 'transparent' or using rgba(). Everything non-transparent looks fine.

Test case: https://en.wikipedia.org/wiki/User:Edokter/gradient

Title should be 'linear-gradient fails with transparent stops'

Comment 4

[Erwin Dokter]

ALso happens in radial-gradient.

Comment 5

[Erwin Dokter]

I was told that the cuase is: "Firefox is doing the gradient (incorrectly) in non-premultiplied RGBA rather than premultiplied RGBA. See Example 23 at http://dev.w3.org/csswg/css-images-3/ for images and details."

Comment 6

[Erwin Dokter]

This can be marked duplicate of bug 591600.

Comment 7

[Kevin Brosnan [Ex-Mozilla]]

Confirmed the same rendering on current buids