1717934 - Diagonals with conic-gradients are very jaggy/pixelated

Status: NEW

(Core :: Graphics, defect, P4)

Description

[Sam Foster [:sfoster] (he/him)]

We're using conic-gradient for the download progress indicator. Its a 14px diameter circle, progressively filled pie-chart style using a conic-gradient background-image rule.

At low pixel densities, the diagonals are really uneven. Here's a reduced case with some examples: https://jsfiddle.net/sfoster/3p2q7mnj/

Is it possible to smooth these lines a bit?

Comment 1

[Brad Werth [:bradwerth]]

Nical, can you investigate?

Comment 2

[Nicolas Silva [:nical]]

It's tricky. To render hard gradient stops with antialiasing we would need to integrate all gradient stops intersecting each pixel and do some area calculation, as opposed to what we do today which is to only select the two gradient stops that affect the pixel's center. It would be much more expensive to draw and that's probably why Chrome and some other browsers (I don't have a mac to test Safary) also render hard gradient stops without antialiasing.

There are other approaches that we considered but they all introduce either precision or performance issues.

Also I suspect that some web content depends on hard gradient stops to be sharp (at least horizontal and vertical ones).

You could sort of fake a bit of smooth transition by leaving a small gap between the gradient stops, however with conic gradients it means there would be more "smoothing" towards the exterior and less at the center.

Comment 3

[Sam Foster [:sfoster] (he/him)]

Is conic-gradient just the wrong tool for the job here? My original implementation for the download progress indicator was a film-strip SVG, with the "pie" rendered at each of the % steps, and setting transform: translateX to advance to the correct frame. That was flexible in that the pre-rendered SVG could be whatever we wanted, but deemed overkill when we could do much the same thing with a couple of lines of CSS and the conic-gradient.