1869681 - Incorrect CSS gradient interpolation due to lack of pre-multiplied alpha

Status: NEW

(Core :: Web Painting, defect)

Description

[Evan Wallace [:evanw]]

Attachment: gradient.html

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:120.0) Gecko/20100101 Firefox/120.0

Steps to reproduce:

Create a HTML file with the following content and open it in Firefox (still broken in Nightly):

<!DOCTYPE html>
<style>
div {
width: 100px;
height: 100px;
background: linear-gradient(red, 10%, rgba(0,0,255,0));
}
</style>
<div></div>

Actual results:

The gradient incorrectly transitions from red through blue before becoming transparent, at least on macOS. This means Firefox isn't interpolating CSS gradients using pre-multiplied colors like it should be doing.

Expected results:

The gradient should transition directly from red to transparent, which is what happens in Chrome and Safari. I believe the specification for this is here: https://www.w3.org/TR/css-color-4/#interpolation-alpha.

Comment 1

[Negritas Sergiu, Desktop QA]

Hello! I have managed to reproduce the issue with firefox 122.0a1(2023-12-14), 120.0.1 and 121.0 on Ubuntu 22.04, Windows 10 and MacOS 12.6. I will mark this issue as NEW and set a component for this in order to get our developers involved.

If it's not the right component please feel free to change it to an appropriate one

Have a nice day!

Comment 2

[Daniel Holbert [:dholbert]]

Reclassifying -- there's no transitions or animations happening here. Gradient drawing probably belongs in Web Painting.

Comment 3

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:tnikkel, could you have a look please?

For more information, please visit BugBot documentation.