为什么'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。有什么方法可以将antialiased 设置为div？

截图 2

最后，这不是我的问题的解决方案，我想避免使用这种解决方法，因为我必须手动计算 scale3d() 的参数值。

我在这里期待第一种情况的解决方案。

Answer 1

我认为解决此问题的唯一方法是先按比例缩小元素，然后按 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。

对于懒骨头（比如我）来说只是一个小小的补充。

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

是的，有一个修复方法，在初始状态下使元素变大并缩小。然后悬停比例为 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);
}