1622254 - CSS Gradient Rendering is inaccurate in Nightly (regression)

Status: RESOLVED FIXED

(Core :: Graphics: WebRender, defect, P3)

Description

[Christopher Kirk-Nielsen]

Attachment: firefox-gradient-rendering.png

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

Steps to reproduce:

I am using am ::after pseudo-element with layered gradients to draw a simple "external link" icon inside my <a> elements. This icon is the typical square with an arrow sticking out of the top-right corner.

This works on my current version of Firefox (73, tested on 74 as well, looks goods) but Firefox Nightly seems to have changed the rendering process and the gradient looks different (see attached file).

Note that this situation uses the em unit to size the pseudo-element, and % to size the gradient. This explains why the borders aren't all exactly the same size on my Retina display.

Actual results:

An extra line appears at the bottom of the "box" of the arrowhead, if that makes sense.

Test case: https://codepen.io/chriskirknielsen/pen/poJLyJg

When at 100%, a little artefact appears on the right, near the middle.
At 90% zoom, I am getting the same bottom line in the arrowhead's "box" as you seen in my screenshot.

The 90% zoom result is what I am seeing in my project at a 100% zoom.

Expected results:

Expected the gradient to render like the current version of Firefox.

Comment 1

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

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Comment 2

[Alice0775 White]

I can reproduce the issue on Nightly76.0a1, Firefox75.0b2 and Firefox74.0 with WebRender on.
Defects disappear or appear when zoom-in 200-240% and resize browser.

Comment 3

[Jeff Muizelaar [:jrmuizel]]

This seems like it might be the same issue as bug 1611898

Comment 4

[Andrew Osmond [:aosmond] (he/him)]

Attachment: Bug 1622254 - Match repeating tile sizes more aggresively to their snapped bounds.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/93cf130f59f9
Match repeating tile sizes more aggresively to their snapped bounds. r=kvark

Comment 6

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/93cf130f59f9

Comment 7

[Julien Cristau [:jcristau]]

Can this ride the trains or do you want to uplift to 75?

Comment 9

[Andrew Osmond [:aosmond] (he/him)]

Comment on attachment 9134661 [details]
Bug 1622254 - Match repeating tile sizes more aggresively to their snapped bounds.

Beta/Release Uplift Approval Request

• User impact if declined: May see glitching with gradients and repeating images, where it repeats one more time than expected. This has been observed on parts of Netflix overlaying videos.
• Is this code covered by automated tests?: Yes
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): It is a very minor tweak to our existing logic on forcing the gradients not to repeat. We have many gradient tests including one that this caused to start passing.
• String changes made/needed:

Comment 10

[Andrew Osmond [:aosmond] (he/him)]

(In reply to Julien Cristau [:jcristau] from comment #7)

Can this ride the trains or do you want to uplift to 75?

It is probable a lot of users are encountering it on Netflix. Seems like that is important enough to warrant an uplift.

Comment 11

[Julien Cristau [:jcristau]]

Comment on attachment 9134661 [details]
Bug 1622254 - Match repeating tile sizes more aggresively to their snapped bounds.

WR fix for 75.0b9

[edit: next beta is b9, not b8]

Comment 12

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/releases/mozilla-beta/rev/55e54bedee48

Comment 13

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

Bugbug thinks this bug is a regression, but please revert this change in case of error.