Bug 282584 – Radial gradients stopping at 100% are broken

• Component: CSS
• Status: RESOLVED FIXED

[Alvaro Montoro]

Created attachment 473139 [details]
Screenshot of radial-gradient bug on Safari

If a gradient has a stop point at 100%, the gradient will be broken on Safari on Mac.

Code example (https://codepen.io/alvaromontoro/pen/ZEgMzrq):


    <div></div>
    <div></div>

    <style>
    div {
      width: 300px;
      height: 300px;
      background: radial-gradient(farthest-side at 0 0, red 100%, blue 0);; 
    }
    
    div:nth-child(2) {
      background: radial-gradient(farthest-side at 0 0, red 99.9999%, blue 0);
    }
    </style>

----

This issue has been happening for years. I thought I had opened a ticket about it before, but I can't find it.

[Radar WebKit Bug Importer]

<rdar://problem/139369366>

[Simon Fraser (smfr)]

Pull request: https://github.com/WebKit/WebKit/pull/36442

[EWS]

Committed 286413@main (737f793f8647): <https://commits.webkit.org/286413@main>

Reviewed commits have been landed. Closing PR #36442 and removing active labels.