Chrome浏览器125%缩放时CSS border-radius随元素位置变化异常问题

问题根因 #

这是Chrome浏览器在非整数缩放比例（如125%、150%）下的已知渲染bug，在Mac高DPI屏幕上触发概率更高，本质是缩放后元素坐标出现小数像素，CPU 2D渲染管线对圆角的抗锯齿计算异常导致的。

可行解决方案 #

• 强制开启GPU加速渲染，给目标元素添加transform: translateZ(0)或者will-change: transform属性，触发Chrome使用GPU渲染管线，避开2D渲染的圆角计算缺陷，这是最通用的修复方案，对现有布局无影响。
• 给元素添加1px透明外轮廓：outline: 1px solid transparent，强制浏览器重新计算元素边缘的渲染范围，也可修复该问题。
• 若上述方案无效，可尝试将border-radius: 50%替换为和元素宽高匹配的固定像素值，比如宽高100px的元素可设置为border-radius: 50px，减少渲染时的比例换算误差。

修复后的代码示例 #

<span></span>

<style>
span {
  display: block;
  margin-left: 60px;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: blue;
  /* 新增以下任意一行即可生效 */
  transform: translateZ(0);
  /* 或 will-change: transform; */
  /* 或 outline: 1px solid transparent; */
}
</style>

内容的提问来源于stack exchange，提问作者erisman20