在Chrome中缩放边界半径50％的等级并不会产生完美的圆圈

Question

我有以下CSS生成的多个圈子：

.map-circle {
    position: absolute;
    cursor: pointer;
    border-radius: 50%;
    width: 5px;
    height: 5px;
    z-index: 999;
    background-color: red;
}

出于某种原因，当我将该圈子缩放到一个大数字时，圆圈在Chrome中并不完美：

.map-circle {
  transform: matrix(10, 0, 0, 10, 0, 0);
}

＆＃13;

＆＃13;

.map-circle {
  position: absolute;
  left:50px;
  top:50px;
  cursor: pointer;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  z-index: 999;
  background-color: red;
  transform: matrix(10, 0, 0, 10, 0, 0);
}

＆＃13;

<div class="map-circle"></div>

＆＃13;

＆＃13;

＆＃13;

似乎是Chrome特有的错误，至少它在Firefox + IE中看起来很好。建议？

Answer 1

不确定这是否是chrome的问题。但是当我使用具有均匀宽度和高度（例如4px或6px）的上述代码时，它工作正常，但是像5px这样的奇数宽度失败。

Answer 2

这似乎是因为Chrome渲染圆圈的程度。如果你放大圆圈（我试过50像素），它显示完整的圆圈就好了。显然，对于某些非常小的尺寸，Chrome并不会尝试渲染边界圆角。

如果你想解决这个问题，SVG可能是个不错的选择。 Chrome无法正确呈现该版本，也不会有任何问题。