为什么'transform:scale()'的转换会使元素在webkit浏览器中变得像素化？

Question

如果我使用CSS缩放元素scale(),则在转换时会变为像素化.但是当转换完成时它再次变为正常(参见屏幕截图1).但是它只发生在webkit浏览器中(在Chrome和Opera中测试)

.foo {
  background: #4FC093;
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  box-shadow: 0 0 10px inset;
  margin: 0 auto;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  cursor: pointer;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -ms-transition: all 3s ease;
  transition: all 3s ease;
}

.foo:hover {
  -webkit-transform: scale(20);
  -moz-transform: scale(20);
  -ms-transform: scale(20);
  transform: scale(20);
}

<div class="foo"></div>

截图1

一种可能的解决方法

我也尝试过使用scale3d()这个div的缩放比例,如此处所示
但是它在Google Chrome中引起了div的锯齿状边缘.

.foo {
  background: #4FC093;
  display: block;
  position: absolute;
  width: 400px;
  height: 400px;
  box-shadow: 0 0 200px inset;
  margin: 0 auto;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: all 3s ease;
  -moz-transition: all 3s ease;
  -ms-transition: all 3s ease;
  transition: all 3s ease;
  -webkit-transform: scale3d(0.05, 0.05, 0.05);
  -moz-transform: scale3d(0.05, 0.05, 0.05);
  -ms-transform: scale3d(0.05, 0.05, 0.05);
  transform: scale3d(0.05, 0.05, 0.05);
}

.foo:hover {
  -webkit-transform: scale3d(1, 1, 1);
  -moz-transform: scale3d(1, 1, 1);
  -ms-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
}

<div class="foo"></div>

我不希望边缘是锯齿状的.我试过-webkit-backface-visibility: hidden在这里使用,但没有运气.我知道有一个属性-webkit-font-smoothing,我们可以将字体平滑设置为antialiased.有没有办法,我们可以设置任何办法antialiased了div？

截图2

最后,这不是我的问题的解决方案,我想避免使用此解决方法,因为我将不得不通过scale3d()手动计算参数值.

我期待这里的第一个案例的解决方案.

Answer 1

是的，有一个修复方法，在初始状态下使元素变大并缩小。然后将鼠标悬停缩放为 1，现在它非常平滑并且没有像素化。

.foo {
    background: #4FC093;
    display: block;
    position: absolute;
    width: 200px;
    height: 200px;
    box-shadow: 0 0 10px inset;
    margin: 0 auto;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    cursor: pointer;
    -webkit-transition: all 3s ease;
    -moz-transition: all 3s ease;
    -ms-transition: all 3s ease;
    transition: all 3s ease;

    -webkit-transform: scale(.20);
    -moz-transform: scale(.20);
    -ms-transform: scale(.20);
    transform: scale(.20);
}

.foo:hover {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}