conic-gradient
conic-gradient copied to clipboard
Add support for "at"
Thanks for this polyfill, it's great and slots in perfectly. I notice the docs say that setting the centre point isn't supported. Is adding support for it likely?
Currently the use of at
seems to be interpreted as a colour somehow. Gradients using the polyfill with a conic gradient which includes at
do not fall back in the way I expect. I would expect that the gradient renders normally at the centre, but instead the behaviour is a bit different.
For example, the following gradient:
background: conic-gradient(at 50% 25%, yellow, lime, blue, violet, red);
It renders correctly natively in Chrome:
But renders like this in Firefox using the polyfill:
Additionally, if used with from
, it throws a JS error, which prevents later conic gradients from rendering.
background: conic-gradient(from 90deg at 50% 25%, yellow, lime, blue, violet, red, yellow);
The error:
TypeError: prevStop.color.map is not a function (conic-gradient.js:184:12)
I don't have the time to work on the polyfill, but I would be glad to review and merge PRs if anyone wants to do it!
@Menardi you can look into the closed PR #13 which had this fix for some pointers.
At a quick glance, that PR correctly renders the gradient as shown in the first post. :+1: However, since the branch is 3 years old now, it has diverged quite a bit from this version. It would need a refactor to get it working with the current version (including support for from
).
Yeah, that's why I just pointed to it instead of fixing it myself 😛 The diversion is mostly due to a rewrite in es6 I believe, but the core structure should be the same since the plugin hasn't changed it's architecture much.