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