1881665 - CSS angled linear-gradients with very close stops appear very jagged

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[Sly]

Attachment: Comparison between Firefox and Chrome

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:123.0) Gecko/20100101 Firefox/123.0

Steps to reproduce:

When making an angled linear-gradient with hard stops, jagged edges appear along the stop. This can be resolved by adjusting the stops to be very close, either by using non-whole percentages (i.e. 9.95% instead of 10%) or adjusting by a single pixel. Compare how the following pen appears in Chrome and Firefox: https://codepen.io/slyacezeta/pen/KKEjPYW

Actual results:

The adjusted stops appear more jagged than the original non-adjusted stops.

Expected results:

The adjusted stops should appear less jagged and more smooth than the original non-adjusted stops.

Comment 1

[Sly]

related: 1833397

Comment 2

[Negritas Sergiu, Desktop QA]

Hello I have managed to reproduce the issue with firefox 125.0a1(2024-02-26), 124.0b3 and 123.0 on Ubuntu 22.04 and macOS 12.6 following the STR provided in the description. I will mark this issue as NEW and set a component for this issue in order to get our developers involved and provide a solution for it on further releases.

Have a nice day!

Comment 3

[Teodor Tanasoaia [:teoxoy]]

I can also reproduce this on Stable 123.0 and Nightly 125.0a1 (2024-02-29).

Nical, any ideas what would cause this?

Comment 4

[Nicolas Silva [:nical]]

The gradient shaders evalute the gradients with a single sample. In other words it does not attempt to do anti-aliasing with hard-stops.