1707624 - Large radial gradient backgrounds get pixelated edges when hardware acceleration is enabled on Mac

Status: NEW

(Core :: Graphics: WebRender, defect)

Description

[Geelman]

Attachment: Screenshot 2021-04-26 at 17.43.00.png

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

Steps to reproduce:

Enable 'Use recommended performance settings' (which likely enables hardware acceleration).

View a large element (>1400px) with a radial background gradient, f.e. https://codepen.io/kslstn/pen/poRYwyJ

div{
height: 100vw;
width: 100vw;
background-image: radial-gradient(circle farthest-side, red 0%, red 100%, blue 100%);
}

Actual results:

Radial gradients with a hard transition from one color to the other get pixelated, jagged edges.

Expected results:

The edge between the color should be smooth down to pixel level as it was in versions before 88.

Comment 1

[Emilio Cobos Álvarez (:emilio)]

I see this with WR enabled on Linux as well.

Comment 2

[Alice0775 White]

Regression window(on Windows 10):
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=abe088b82e73b9859232c624a609d7dc1ead9fe1&tochange=4575418fa949c5b879ddb8eb1e56f048670f928d

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

Set release status flags based on info from the regressing bug 1687977

Comment 4

[Dzmitry Malyshau [:kvark]]

Passing to Nical, based on the regression range

Comment 5

[BugBot [:suhaib / :marco/ :calixte]]

The bug has a release status flag that shows some version of Firefox is affected, thus it will be considered confirmed.

Comment 6

[Nicolas Silva [:nical]]

The patch in bug 1885571 fixes this.