1569898 - CSS3 Linear gradient blurred color stops when it should be sharp

Status: RESOLVED FIXED

(Core :: Graphics, defect, P3)

Description

[chill]

Attachment: test.jpg

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

Steps to reproduce:

Created a linear gradient on body element background: linear-gradient(135deg, red 0%, green 15% 23%, white 23% 65%, red 65% 100%)

Actual results:

Color stops are not sharp as in Chrome and Edge Canary (not tested on Safari)

Expected results:

Color stops ought to be sharp.

Comment 1

[Liviu Seplecan]

Hi @chill, please provide a TC, link it on the attach section in order to test it. For now I will set a component, if isn't the proper one please fell free to change it.
Thanks.

Comment 2

[Jessie [:jbonisteel] pls NI]

Can you also please share the contents of about:support as a text file? Thank you!

Comment 3

[Jessie [:jbonisteel] pls NI]

Dont yet know if this is webrender or not, but will keep an eye on it in our wr-70 metabug until we get more info

Comment 4

[chill]

Attachment: about_support.txt

Comment 5

[Jessie [:jbonisteel] pls NI]

Is it possible to send us a URL where you can reproduce this issue so we can take a look at it on our end?

Comment 6

[chill]

sure thing, example can be seen here https://marketing.jvrafricagroup.co.za/targeted-prediction

can't seem to reproduce on the machine (Macbook Pro 2018) i'm using right now as well as a different Windows machine with a more powerful GPU.

Comment 7

[adilson.smem]

Here is a pen with the same problem (I'm not sure if it's the same cause).
https://codepen.io/adilsonjr/pen/mdVNWLY

Quoting the important part:
HTML

<div class="css-test">
  ::before pseudo element without transofrm rotate and gradient steps doing well
</div>
<br/>
<div class="css-test rotated">
    ::before pseudo element without transofrm rotate and broken gradient steps
</div>

and CSS:

.css-test {
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.css-test::before {
  left: 190px;
  top: 10px;
  background: linear-gradient(225deg, #fff 1%, #fff 50%, #666 50.1%, #666 99%);
  width: 20px;
  height: 20px;
  border: none;
  position: relative;
  display: block;
  content: '';
}

.css-test.rotated::before {
    transform: rotate(224deg);
}

Comment 8

[adilson.smem]

[Tracking Requested - why for this release]:

(In reply to adilson.smem from comment #7)

Here is a pen with the same problem (I'm not sure if it's the same cause).
https://codepen.io/adilsonjr/pen/mdVNWLY

Quoting the important part:
HTML

<div class="css-test">
  ::before pseudo element without transofrm rotate and gradient steps doing well
</div>
<br/>
<div class="css-test rotated">
    ::before pseudo element without transofrm rotate and broken gradient steps
</div>

and CSS:

.css-test {
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.css-test::before {
  left: 190px;
  top: 10px;
  background: linear-gradient(225deg, #fff 1%, #fff 50%, #666 50.1%, #666 99%);
  width: 20px;
  height: 20px;
  border: none;
  position: relative;
  display: block;
  content: '';
}

.css-test.rotated::before {
    transform: rotate(224deg);
}

Comment 9

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

The bug has a release status flag that shows some version of Firefox is affected, thus it will be considered confirmed.

Comment 10

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

Redirect a needinfo that is pending on an inactive user to the triage owner.
:bhood, since the bug has recent activity, could you have a look please?

For more information, please visit auto_nag documentation.

Comment 11

[Bob Hood [:bhood]]

Could you please re-test with current releases of Firefox (e.g. Fx101) and see if this behavior still exists?

Comment 12

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

Redirect a needinfo that is pending on an inactive user to the triage owner.
:bhood, could you please find another way to get the information or close the bug as INCOMPLETE if it is not actionable?

For more information, please visit auto_nag documentation.

Comment 13

[chill]

It looks like it has been fixed on the latest Firefox (101.0.1 (64-bit)). Thanks!