变换比例使边界半径的Div模糊

Question

基本上，当我将鼠标悬停在div上时，我通过变换增加比例。这个div有一个边界半径，当它缩放时，它变得模糊。在JSFIDDLE示例中，模糊发生然后消失，但在我的本地主机网站上，它保持模糊。

这只是发生在我的屏幕上，还是其他人也看到了吗？

的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

什么变换做的是利用现有的大小和放大它。你可以做的是设置& - 在宽度和高度上的内容：70px（10px乘以变换的缩放因子7）。将它放在中间位置，而不是在悬停时将其缩放7倍，在正常视图中将其缩小。

我已经更新了小提琴向你展示我的意思。 https://jsfiddle.net/3arynm5v/3/

正如你可以看到我已经修改了内部和外部对：

&: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%); 
    }