Bug 54749 – -webkit-radial-gradient: wrong rendering when size first and last color stops are at 100%

• Status: NEW
• Component: CSS

[Lea Verou]

The 2nd gradient in the testcase should be very similar to the 1st and 3rd, but instead a solid color displays. I'm using the latest nightly build (Version 5.0.3 (6533.19.4, r78794)

I thought this was a spec mistake, but after discussing it with Tab Atkins on www-style [1], it seems it's a browser bug.

    [1]: http://lists.w3.org/Archives/Public/www-style/2011Feb/0538.html

[Simon Fraser (smfr)]

This seems to be a CG bug, probably related to bug 51839.

[Ahmad Saleem]

I am still able to reproduce this bug in WebKit ToT (267195@main) and we only get first and third image in Safari while Chrome shows all three.

Adding - "BrowserCompat" tag since Firefox Nightly 118 and Chrome Canary 118 match each other and only Safari is different.

[Alexandre Dieulot]

Here’s an example of a (proficient) developer without access to Safari unknowingly getting bitten by it: https://x.com/anatudor/status/1712928517384446155

Direct link to CodePen: https://codepen.io/thebabydino/pen/bGOJQOy

The last radial gradient parts display as completely black for me on iOS 16.7.1 Safari 16.6 and as transparently black on MacOS 13.6 Safari 17.0 18616.1.27.111.22 as well as Safari Technology Preview 180 (Safari 17.4, WebKit 18618.1.1.2).

[Radar WebKit Bug Importer]

<rdar://problem/122588445>