Transform Scale makes Div with border-radius Blurry - css

Question

Basically, when I hover over a div, I increase the scale with transform. This div has a border-radius, and when it scales, it gets blurry. In the JSFIDDLE example, the blur happens then goes away, but on my localhost site, it stays blurry.
Is it just happening to my screen, or is anyone else seeing this too?
JSFIDDLE LINK https://jsfiddle.net/3arynm5v/
HTML
<div class="circle">
<div class="circle--inner"></div>
<div class="circle--outer"></div>
</div>
SCSS
.circle {
width:300px;
height:300px;
background:black;
position:relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
&:hover &--inner {
transform:scale(7);
}
&--inner, &--outer {
position:absolute;
margin:0 auto;
left:0; right:0;
top:50%;
transform:translateY(-50%);
border-radius:200%;
}
&--inner {
width:10px;
height:10px;
background:white;
transition:transform 1s;
transform-origin: center center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
}
&--outer {
width:30px;
height:30px;
border:5px solid white;
}
}

Answer 1

What transform does is take the existing size and zoom in on it. What you can do is set the &--inner on width and height: 70px (10px times the zoom factor 7 from the transform). Position it in the middle and instead of zooming it 7x on hover, scale it down on the normal view.
I've updated the Fiddle to show you what I mean. https://jsfiddle.net/3arynm5v/3/
As you can see I've edited the outer and inner to to:
&:hover &--inner {
transform:translate(0, -50%)scale(1);
top: 50%;
}
&--inner, &--outer {
position:absolute;
margin:0 auto;
left:0; right:0;
top:50%;
border-radius:200%;
}
&--inner {
width:70px;
height:70px;
background:white;
transition:transform 1s;
transform-origin: center center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
perspective: 1000;
transform: translate(0, -50%)scale(.1);
}
&--outer {
width:30px;
height:30px;
border:5px solid white;
transform:translateY(-50%);
}