1763266 - radial-gradient will be blurry when a scale transform is applied

Status: NEW

(Core :: Graphics, defect)

Description

[xavier.orourke]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.60 Safari/537.36

Steps to reproduce:

In CSS, set the background of a div to be a radial-gradient() and apply a transform: scale(x > 1) like in this codepen:

https://codepen.io/x4vier-the-flexboxer/pen/wvpypWb

Actual results:

the radial gradient is blurry

Expected results:

the image should be crisp and clear

Comment 1

[Sotaro Ikeda [:sotaro]]

:gw, can you comment to the bug?

Comment 2

[Glenn Watson [:gw]]

It looks like the radial gradient cache probably doesn't take into account the current scale factors, which we do for things like line decorations etc. Nical, do you have time to look in to this one?

Comment 3

[Nicolas Silva [:nical]]

I don't have time to look into it in the short term.

Gradients are indeed rendered/cached in local space. In general the artifacts are hard to see because of how by nature most gradients are smooth, but with hard stops or very large scale factors issues become more visible.

Comment 4

[Michal Čaplygin [:myf]]

Attachment: testcase-01-two-colour-gradient-with-various-scales.html

This issue is common for presumably any kind of gradient when scaled up; attaching MRT for linear.

Comment 5

[Michal Čaplygin [:myf]]

Attachment: testcase-01-capture-firefox.png

Screenshot of the MRE in current Firefox: five variants of same linear gradient filling same visual area (200×100 CSS pixels) that should produce magenta and cyan square next to each other.

First is in natural sizing and boundary between squares is sharp. Boundary in the second, which is 10× enlarged, is blurred approximately in 10 pixels wide band (through bluish colour, but it is different problem).

Third, scaled 20×, has blurred bluish band about 20 pixels wide; 100× bad about 100px wide and shifted to the left; and finall 200× has the band about 150 pixels wide, and centred again.

Comment 6

[Michal Čaplygin [:myf]]

Attachment: testcase-01-capture-chrome.png

Same MRE in Chrome: all boundaries are sharp. (Though there are some other issues with dimensions calculations.)