Circle shapes are jagged ONLY in Edge

I'm having a weird anti alias issue with chrome and safari browsers.

Creating circle shapes in edge and scaling it down to 20% causes the shape to  appear jagged edges however....

if I create an empty symbol and in javascript and css I do

sym.$('container').html('<div id="circle"></div>');

$('#circle').css("width", "203px");

    $('#circle').css("height", "203px");

    $('#circle').css("background", "none repeat scroll 0% 0% red");

    $('#circle').css("-moz-border-radius", "50%");

    $('#circle').css("border-radius", "50%");

    $('#circle').css("-webkit-border-radius", "50%");

   $('#circle').css("overflow", "hidden");

   $('#circle').css('border', '11px solid blue');

  $('#circle').css('-webkit-transform', 'scale(.2,.2)');

The shape renders perfectly. Also I've applied  same css to the circle shape I created in Edge and it still appears jagged in Chrome and Safari.

What it is Edge doing differently?? If anyone can give me some insight would be greatly appreciated. Thanks in advance.