html - 缩放容器不会保持圆形(边界半径 : 50%)?

Question

我有一个简单的圆形容器:

.foo {
  width: 5px;
  height: 5px;
  background-color: green;
  border-radius: 50%;
}

当我尝试使用以下方法缩放其大小时:

.foo {
  -webkit-transform: scale(10,10);
          transform: scale(10,10);
}

它看起来不再那么圆了。看起来它的 border-radius 得到的值等于以像素为单位的原始边界半径乘以比例值。

https://jsfiddle.net/h70wsqrv/1/

有什么解决办法吗？

更新:似乎问题只发生在 Chrome 中。 Firefox 显示一个完美的圆圈。

Answer 1

奇怪，但如果您将宽度和高度设置为 6px 或任何偶数，它就会起作用。

当半径为奇数时，Chrome 中的半径似乎计算错误。

.foo {
  margin: 100px;
  width: 6px;
  height: 6px;
  background-color: green;
  border-radius: 50%;
  -webkit-transform: scale(15, 15);
  transform: scale(15, 15);
}

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