1720893 - (wr-gradients) [meta] [project] Fix gradient correctness issues

Status: NEW

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

Description

[Nicolas Silva [:nical]]

Edit: This started as a meta bug for pixelated gradients and ended up covering all gradient quality/correctness issues. Pixelated gradients are now tracked by bug 1889093.

---

Most gradients are rendered via a cached render task and composited with the image shader. We limit the resolution of the cached gradients to 1024 pixels. Most gradients are only smooth transitions so the artifacts aren't very visible. However, when there are hard stops it can cause some very visible pixelation artifacts. Today this should only affect radial and conic gradients.

There's a few bugs on file already for various cases revolving around the same root cause so I'm going to group them under this meta-bug.

Potential solutions:

• Increase the maximum resolution for cached gradients with hard stops. Not really a fix per se but easy and might be enough.
• Roll back to having brush shaders for radial and conic gradients in addition to the cached ones, and use them for large gradients with hard stops. That's the most correct route but our code isn't well organized for doing this wihout duplicating a large amount of code. It would be nice to refactor some of this tech debt beforehand if we go this route.

Comment 1

[gaxweb]

This also happens with Firefox 90 on Fedora now when using a repeating-linear-gradient() with hard stops as background-image.

Comment 2

[gaxweb]

Actually, this is also broken:

linear-gradient( -45deg, white 1.2%, white 2%, #51993c 2%, #51993c 3%, white 3%)

So it seems like it affects all hard stops, if the gradient is applied to an element that covers a large area. Pretty severe, if you ask me. Doesn't happen with older Firefox versions.

Comment 3

[[e-mail]]

This is definitely a problem for a pair of linear gradients we're using to visually separate sections of a page header that spans the window width. ```css
linear-gradient(72deg, white 41.7%, rgba(1, 1, 1, 0) 41.7%), linear-gradient(#334466, #001540)

The 1024px limit is definitely not pleasant to see on 4k screens!

Instead of picking an arbitrary(ish) limit for all gradients, could the largest element using that gradient determine the cached size? Maybe treat a too-small cached gradient as a miss and update the cache?

(Meanwhile, I slid the first stop to 41.6% to smooth out the jaggies. Still looks poor compared to Chrome/Edge)

Comment 4

[michael.holmes]

It also looks pretty severe if you create stripes with repeating-linear-gradient which is a not-uncommon usecase:

body {
  background: #fb0;
  background-image: repeating-linear-gradient(-135deg, transparent, transparent 35px, rgba(0,0,0,1) 35px, rgba(0,0,0,1) 70px);
  padding: 0;
  height: 100vh;
}