边框半径和浏览器缩放

Question

试图找出与浏览器缩放相关的 css 边框半径的一个非常奇怪的问题。正如您在下面的 gif 中看到的，只要元素的位置发生变化，边框半径就会发生变化。

奇怪的是，只有当我放大到 125% 时才会发生这种情况。如果有帮助的话，我会在 MacBook 上使用 Chrome。这是一个简单的CodePen，它为我复制了这个问题。

<span></span>

<style>
span {
  display: block;
  margin-left: 60px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: blue;
}
</style>

任何帮助将不胜感激！

Answer 1

问题是您被缩放到 125%，而 Chrome 遇到了所谓的“小数像素”问题。本文深入探讨了该主题：https://www.simonbattersby.com/blog/browsers-and-fractional-pixels/，但一个很好的标注是：

在这种情况下，Firefox 和 IE8 将 div 宽度四舍五入到最接近的整数 像素，所有其他测试的浏览器只使用整数值。

在 1x 显示器（其中每个像素直接与单个 RGB 光源相关）上，浏览器可以将像素显示为蓝色圆圈“ON”的一部分或不显示蓝色圆圈“OFF”的一部分。看起来您正在视频中展示 1x 显示器演示。

当小数像素 0.5。 2x 显示器可以显示更大的密度，因此这种情况不太常见。

这个问题永远不会消失，当您在浏览器中放大或缩小时，您将继续看到这种行为。呈现是非典型的和倾斜的，因为您的用户选择了以这种方式查看它，但对于使用正常缩放的任何其他用户 - 它会按预期显示。