缩放容器不会保持圆形（边界半径：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>