CSS轮播指示器小圆圈页面缩小后显示为椭圆形异常问题求助

• 核心为浏览器亚像素渲染与flex布局默认特性共同导致：
  • 极小尺寸的圆点在页面缩放时，CSS像素与物理像素换算会产生小数像素值，浏览器对宽高的小数像素舍入规则不一致，导致border-radius: 50%无法渲染为正圆
  • flex容器默认的flex-shrink: 1属性允许子元素被挤压，圆点切换激活态的过渡过程中，极小尺寸的元素容易被挤压出非整数宽高
  • 全局transition: all 0.3s会让宽高、边框等属性在过渡时生成中间小数数值，进一步放大亚像素渲染误差

1. 禁止flex布局挤压圆点尺寸，这是最核心的修复方案

.circle {
  /* 原有属性保持不变，新增以下规则 */
  flex-shrink: 0;
}

2. 明确指定过渡属性，避免无关属性参与动画减少亚像素计算

.circle {
  /* 替换原有transition: all 0.3s */
  transition: width 0.3s, background-color 0.3s;
}

3. 可选优化：明确盒模型规则，避免边框额外占位带来的尺寸计算误差

.circle {
  box-sizing: border-box;
}

4. 可选优化：触发GPU渲染规避软件渲染的像素舍入问题

.circle {
  transform: translateZ(0);
}

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