1763221 - CSS gradient rendering glitches producing jagged artefacts, device pixel ratio or zoom level dependent

Status: UNCONFIRMED

(Core :: Graphics, defect)

Description

[Michal Čaplygin [:myf]]

Attachment: testcase-01-at-dpr-0.75-on-150-factor-monitor.png

Sharp linear gradients sometimes produce chaotically jagged edges. Symptoms are heavily dependant on concrete (sub-pixel) values, device pixel ratio and/or zoom level: attached testcase was created and documented on monitor with 150 scale factor, i.e. DPR ratio 1.5 at browser 100% zoom level or 150% browser zoomed page on 100% factored monitor. 300% zoom level also works for both factors, and 50% zoom on 150% factored monitor (DPR 0.75) is probably best demonstration (used for first attached screenshot).

Testcase source:

<title>
CSS gradient rendering jagged artifacts glitch
</title>
<p style="
 font-size: calc(2em / var(--dpr));
">DPR: <output id=dpr></output>
<script>
 (onresize=()=>document.body.style.setProperty(
 '--dpr',dpr.value=devicePixelRatio))()
</script>
<div style="
 width: 100px; height: 100px;
 transform: scale(calc(1 / var(--dpr))) scale(5);
 transform-origin: 0 0;
 background-image: linear-gradient(
  45deg,
  white 0 42.1612377166748011px,
  /* First edge OK if ....010px */
  black 0 67.88224411010741466px,
  /* BOTH edges OK if .....465px */
  white 0
 );
"></div>

Symptoms are scattered across more bugs, most notable is probably closed Bug 1185636 but haven't found any with concise testcases and demonstrations.

---

Bug observed on badges made by www.westandwithukraine.eu .

Comment 1

[Michal Čaplygin [:myf]]

Attachment: testcase 01 - static - CSS gradient rendering jagged artifacts glitch - bug 1185636.html

Comment 2

[Michal Čaplygin [:myf]]

Attachment: testcase 02 - interactive - CSS gradient rendering jagged artifacts glitch - bug 1185636.html

Comment 3

[Michal Čaplygin [:myf]]

Attachment: testcase-01-at-dpr-1.5-on-150-factor-monitor.png

Comment 4

[Michal Čaplygin [:myf]]

Attachment: testcase-01-at-dpr-3.0-on-150-factor-monitor.png

Comment 5

[Michal Čaplygin [:myf]]

Attachment: testcase-01-at-dpr-0.75-reference-chrome.png

For reference, testcase in 50% zoom (0.75 DPR) rendered with Blink.

Comment 6

[Sotaro Ikeda [:sotaro]]

:gw, can you comment to the bug?

Comment 7

[Glenn Watson [:gw]]

It's hard to say what is going on here without doing a detailed investigation first. We do cache linear gradients in the render task cache, it's possible that the scale factors are not being determined very well - though the artifacts look a bit different to a normal up-sampling issue.

Comment 8

[Michal Čaplygin [:myf]]

Attachment: testcase-01-no-dpr-negation-600-percent-nn-rescale.png

First tescase without DRP negation, rescaled to 600% size, nearest neighbour. (Crisp edge visible.)

Comment 9

[Michal Čaplygin [:myf]]

Attachment: testcase-01-capture-zoom-changes.webm

Capture of first testcase in all zoom levels provided by toolbar buttons; glitch occurs at 50%, 100%, 200% and 400% zoom levels.

Comment 10

[Michal Čaplygin [:myf]]

Attachment: testcase-02-stops-changes.webm

Capture of the second testcase: changing colour stop positions. First stop from produces glitches around values 8.5, 12.1, 17.1, 20.9, 25.2, 27.7 etc. Changing the second stop's position smoothens both edges.

Comment 11

[Michal Čaplygin [:myf]]

Attachment: testcase-02-capture-android-nightly-2022-04-18T05-10-34.170641.mp4