为什么使用rem单位设置等宽高、border-radius:50%无法生成圆形

问题原因 #

该现象是Chrome浏览器独有的小数像素舍入机制导致：

1. 桌面端浏览器默认根字体大小为16px，设置根字体为60%时，实际根字体计算值为16px * 60% = 9.6px，代码中0.8rem换算为像素为0.8 * 9.6px = 7.68px，属于带小数的亚像素尺寸。
2. Chrome渲染小尺寸元素时，会将亚像素尺寸强制对齐到整数物理像素，宽高的舍入逻辑可能出现微小偏差，导致实际渲染的宽高数值不一致，设置border-radius: 50%时就会呈现为椭圆。
3. 当根字体设置为62.5%时，根字体计算值为16px * 62.5% = 10px，0.8rem刚好换算为整数8px，不存在舍入误差，就能正常渲染为圆形。
4. Firefox、Safari支持更精细的亚像素渲染，不会强制对小尺寸元素的宽高做整数舍入，因此不会触发该问题。

解决方案 #

• 小尺寸固定装饰类元素直接使用px单位定义宽高，避免rem换算带来的小数误差
• 若需保留rem适配方案，可将根字体大小调整为计算后为整数的数值（默认16px根字体下设置62.5%即可得到10px的整根字体）
• 给对应元素添加transform: translateZ(0)开启GPU渲染，GPU对亚像素的处理精度更高，可避免舍入偏差
• 额外添加aspect-ratio: 1/1属性，强制元素保持1:1的宽高比，避免渲染时宽高出现差异

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