1708030 - repeating conic gradient small value collidoscope

Status: UNCONFIRMED

(Core :: Graphics: WebRender, defect)

Description

[jsnkuhn]

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

Steps to reproduce:

Created a repeating-conic-gradient with very small stop values:

background-image: repeating-conic-gradient(#fff 0 .5deg, #000 .5deg .75deg);

Actual results:

causes a kaleidoscope like pattern. see codepen:

https://codepen.io/jsnkuhn/pen/BajMOBR

Expected results:

Can't imagine this is expected behavior. Seems consistent with chrome at least.

Comment 1

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

The Bugbug bot thinks this bug should belong to the 'Core::Graphics' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Mayank Bansal]

Attachment: no-bug.png

I get the same renderimg on Chrome and the latest nightly (unless I am mistaking something)

Comment 3

[Mayank Bansal]

@ jsnkuhn : Can you attach a screenshot of what you see on Chrome Vs what you see on Firefox?
And type "about:support" in firefox's address bar and paste the contents here please.

Comment 4

[Dzmitry Malyshau [:kvark]]

Attachment: Nightly/Linux bug

I clearly see a difference with Chrome.
Adding NI from our resident gradients expert :)

Comment 5

[jsnkuhn]

As I stated in my original post I am NOT seeing any difference between the FF and Chrome render. The "bug" I'm reporting here is that above rendering (which is exactly the same as what I'm seeing) doesn't come off to me as a repeating-conic-gradient. There is a point at which small enough stop values go from creating the classic sunburst look of a repeating-conic-gradient to the strange psychedelic art in the screen shot above. I'm suggesting that maybe there should be some sort of clamping of these low values to stop the most likely unintended trippy effect.

It appears that a similar issue can happen with low value stops on repeating-radial-gradient: https://codepen.io/jsnkuhn/pen/VwPOLMe
Again this IS consistent which chromes implementation but isn't consistent with the concept of a radial-gradient.

Comment 6

[jsnkuhn]

repeating-linear-gradient doesn't break as spectacularly but the issue still exists:

https://codepen.io/jsnkuhn/pen/dyNEojX?editors=1100

Comment 7

[Nicolas Silva [:nical]]

This "moire pattern" type of sampling issue is to be expected, somewhat. When rendering a gradient, for each pixel we determine which pair of gradient stops are around the center of the pixel and compute the gradient between them. However, when things get tiny, you could have more than two gradient stops touching the area of a pixel. To render this at a higher quality we would have to integrate all gradient stops over the area of the pixel rather than using this approximation that considers only the pixel center as if it had a zero area. Unfortunately that would take an aready costly computation and make it much much more expensive. Also, some web content rely on the sharpness of hard stops (in particular when they are axis-aligned).

Equivalent Chromium bug for this issue https://bugs.chromium.org/p/chromium/issues/detail?id=408528