为什么'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
但它在谷歌浏览器中引起了垃圾边缘的锯齿状边缘。

.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);
}

Answer 2

这将是一项更多的工作，但您可能想要考虑不使用比例。

如果你正在计划调整css形状的大小，你可以通过转换用于绘制形状的属性并使用包装div进行定位来逃脱。

<强> Working Example

html：

<div class="row"> <!-- use a parent div to create rows -->
    <div class="wrap"> <!-- use a wrapper to position -->
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
</div>
<div class="row">
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
    <div class="wrap">
        <div class="foo"></div>
    </div>
</div>

css：

.wrap {
    position: relative;
    height:20px;
    width:20px;
    display: inline-block;
}
.foo {
    position: absolute;
    top: 190px;
    left: 190px;
    background: #4FC093;
    display: block;
    width: 20px;
    height: 20px;
    box-shadow: 0 0 10px inset;
    border-radius: 50%;
    cursor: pointer;
    transition:all 3s ease;
    z-index: 99;/*using an unnecessarily large z-index makes for a nicer transition in Chrome*/
}
.foo:hover {
    top: 0px;
    left: 0px;
    width: 400px;
    height: 400px;
    box-shadow: 0 0 200px inset;
    transition:all 3s ease;
    z-index: 1;
}

Answer 3

我认为唯一的解决方案是首先缩小元素，然后将其缩放到正常大小，就像Mazhar Ahmed回答的那样。

如果您不想手动计算尺寸，则可以使用CSS变量，如下所示：

--scale:0.1;

.element{
  width: 40px * (1 / var(--scale));
  height: 40px * (1 / var(--scale));
  transform: scale(var(--scale));
}

.element:hover{
  transform:scale(1);
}

如您所见，您仅在变量中定义比例因子。 CSS完成其余的工作，并相应地设置宽度和高度。
因此，在我们的案例中，该元素为400x400px，但按比例缩小，因此看起来像我们CSS中定义的40x40px。

只是懒骨头（像我）的一小部分。