How to keep transparent radial background smooth in browsers other than Chrome?

I am using CSS background gradients to create a transparent radial gradient effect. If you look here in Chrome: http://dev.aaronpitts.ch/unitymedia/index.html you will see it working how I want (the Social Media, SEM, Web Design and Begin your journey backgrounds). The problem is the other browsers don't keep it smooth and cut off the edges. Any ideas?

This is the code I'm using:

#home-services article {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4YjhiOGIiIHN0b3Atb3BhY2l0eT0iMC4zNyIvPgogICAgPHN0b3Agb2Zmc2V0PSI3NSUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC44NCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover,  rgba(139,139,139,0.37) 0%, rgba(255,255,255,0.84) 75%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(139,139,139,0.37)), color-stop(75%,rgba(255,255,255,0.84)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
    background: -o-radial-gradient(center, ellipse cover,  rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
    background: -ms-radial-gradient(center, ellipse cover,  rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
    background: radial-gradient(ellipse at center,  rgba(139,139,139,0.37) 0%,rgba(255,255,255,0.84) 75%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e8b8b8b', endColorstr='#ffffff',GradientType=1 );
    text-shadow: 2px 2px 0px #FFF;
}

Solution

To avoid having the gradient cut off you need to stop it before it reaches the closest side of the container.

Fortunately, there is a keyword property in the gradient syntax closest-side.

JSfiddle Demos (of various options)

CSS for closest-side using obvious gradient

.closest-side {
    background: radial-gradient(
     ellipse closest-side, 
     rgba(0,0,0,1) 0%,
     rgba(255,255,255,1)75%,
     rgba(0,0,0,1) 100%);
}