Incorrect blending of multiple linear-gradients as background-images

NEW
Unassigned

Status

()

Core
Graphics
4 years ago
4 years ago

People

(Reporter: Louis-Rémi BABE, Unassigned)

Tracking

25 Branch
x86_64
Linux
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

4 years ago
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.
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% );
}
(Reporter)

Comment 2

4 years ago
Created attachment 781047 [details]
Different rendering in Firefox Nighlty and Chrom Dev

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

Comment 3

4 years ago
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

4 years ago
ALso happens in radial-gradient.

Comment 5

4 years ago
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

4 years ago
This can be marked duplicate of bug 591600.
You need to log in before you can comment on or make changes to this bug.