Why is webkit radial gradient not working in Safari?

Question

This is working in Chrome but not in Safari:

background: -webkit-radial-gradient(center, ellipse cover, #fdfdfd, #d3d3d3);

How can I fix it for Safari?

Wollastonite

What version of Safari are you using? – Delicatessen

related: https://mcmap.net/q/271206/-how-to-make-radial-gradients-work-in-safari/8620333 – Panier

Answer 1

Try using for Safari:

background: -webkit-gradient( radial, <point>, <radius>, <point>, <radius>[, <stop>]* ) <color>;

Examples and more explanation can be found here: http://www.the-art-of-web.com/css/radial-gradients/

Emersed

not sure how to create exactly same gradient. Can you please convert my version to exact one with exact values? – Wollastonite

There are many gradients (namely ones that adapt to the size of their box) that can be done using the new syntax that can't be done using the old syntax ie. there is no exact analog to "cover" in the old syntax. – Monosaccharide

Answer 2

It doesn't even work correctly in Chrome, as it shows a circular gradient, not an elliptical one. It does work correctly in Webkit nightlies.

The reason it doesn't work in Safari is that the syntax hasn't propagated yet to a stable version of Safari. Eventually it will. You need to learn patience my young padawan :)

For now, you may use -webkit-gradient, but always include the -webkit-radial-gradient equivalent after it. And while we're at it, don't forget the other prefixes too (-o-,-moz-,-ms-)

Demagogue