css - 为什么 '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 的比例，正如建议的那样 here
但它会导致 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。有什么方法可以为 div 设置 antialiased 吗？

截图 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);
}