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

Question

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

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

JSFIDDLE链接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

transform所做的是采用现有的大小并放大它。您可以做的是设置宽度和高度的&--内部值: 70px (10px是来自变换的缩放因子7的10px)。将它放在中间，而不是在悬停时放大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%);
  }