时间戳

首页 > 解决方案 > 边框半径和浏览器缩放

html - 边框半径和浏览器缩放

问题描述

试图找出与浏览器缩放相关的 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>

任何帮助，将不胜感激！

示例 Gif

标签： htmlcsssassborder-radius

解决方案

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

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

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

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

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

推荐阅读