在Chrome中缩放一个border-radius 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);
}

.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);
}

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

似乎是Chrome特有的错误，至少在Firefox和IE中显示正常。有什么建议吗？

- user1231561

---

border-radius: 9999em; 应该可以解决问题... http://jsfiddle.net/m98y0wej/3/ - dandavis

遗憾的是这个方法没起作用 :/ 我还是在这里看到同样的问题。我在帖子中加了一张截图，展示了我在你的fiddle上看到的情况。 - user1231561

有趣的事实：如果您使用ems，它似乎可以工作... - Owlvark

Answer 1

不确定这是否是Chrome的问题。但是当我使用上述代码时，如果宽度和高度都是偶数（比如4px或6px），它可以正常工作，但是对于奇数宽度（如5px）则会失败。

- Gaurav Kushwaha

---

这太奇怪了。用5像素时它表现得很奇怪，但当改为4像素时圆形就正常了。这个方法解决了我的问题。 - user1231561

Answer 2

这似乎是因为Chrome渲染圆形的方式非常接近。如果你放大圆形（我试过50像素），它就可以完整地显示一个圆。显然，在某些非常小的尺寸下，Chrome不会尝试努力渲染边框半径的角落。

如果您想修复此问题，SVG可能是一个不错的选择。Chrome不应该有任何问题正确地渲染它。

- alloy

---

确实，SVG可能是一个好的选择——只是在这种情况下不可行 :/ - user1231561