边框半径和浏览器缩放

Question

试图找出与浏览器缩放相关的 css border-radius 的一个非常奇怪的问题。正如您在下面的 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/ 但一个很好的标注是：

In this case Firefox and IE8 round the div width to the nearest whole pixel, all the other tested browsers use the integer value only.

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

当小数像素 < 0.5 时，它在 1x 场景中为“OFF”，而“ON” > 0.5。 2x 监视器可以显示更大的密度，因此这种情况不太常见。

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

边框半径和浏览器缩放

Border Radius and Browser Zoom

html

css

sass

border-radius