Transform Scaleはボーダー半径でDivを作成しますBlurry

Question

基本的に、divにカーソルを合わせると、変換でスケールが増加します。このdivにはボーダー半径があり、縮尺を変更するとぼやけてしまいます。 JSFIDDLEの例では、ブラーは消えてしまいますが、localhostサイトでは、ぼやけたままです。

私の画面にちょうど起こっているのですか、それとも誰にも見ていますか？

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（変換のズームファクタ7の10倍）を設定します。中央に配置し、ホバーで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%); 
    }