CSS仅设置两个边角圆角导致Chrome浏览器渲染异常问题求助

问题现象 #

• 动态增长的进度条，仅设置左侧圆角时，Chrome内核浏览器（包括Electron）中会出现左侧竖线反复闪烁的异常（约4秒后出现）
• Firefox中无此问题，页面缩放后异常暂时消失，恢复正常缩放重启进度条增长后异常复现
• 若将进度条内层元素改为全圆角，异常消失，但无法实现“仅满状态时右侧为圆角”的需求

问题原因 #

这是Chrome内核渲染引擎在处理动态宽度元素+单侧圆角时的已知渲染bug，当元素宽度持续变化时，浏览器对圆角边缘的裁剪和抗锯齿计算出现偏差，导致出现闪烁的竖线。

可行解决方案 #

方案1：用clip-path替代border-radius实现单侧圆角 #

通过clip-path精准控制圆角，避免Chrome的渲染bug：

.innerBar {
  /* 移除原有单侧圆角设置 */
  /* border-top-left-radius: .25em; */
  /* border-bottom-left-radius: .25em; */
  clip-path: inset(0 round .25em 0 0 .25em);
  /* 保留其他原有样式 */
}

/* 进度条满状态时设置全圆角 */
.innerBar.full {
  clip-path: inset(0 round .25em);
}

clip-path: inset(0 round 左上 右上 右下 左下)的语法可以灵活控制各边角的圆角大小，Chrome对其动态渲染的兼容性更稳定，不会出现闪烁问题。

方案2：外层容器配合overflow:hidden实现圆角裁剪 #

利用外层容器的圆角和溢出裁剪，间接实现内层进度条的圆角效果：

/* 外层进度条容器 */
.outerBar {
  border-radius: .25em;
  overflow: hidden;
  /* 保留其他原有样式 */
}

.innerBar {
  /* 移除原有单侧圆角设置 */
  /* border-top-left-radius: .25em; */
  /* border-bottom-left-radius: .25em; */
  /* 保留其他原有样式 */
}

.innerBar.full {
  border-radius: .25em;
}

外层容器的overflow:hidden会自动裁剪内层元素，实现左侧圆角的视觉效果；进度条满状态时，内层的全圆角也能正常显示，同时规避了Chrome的渲染bug。

方案3：添加同色边框临时修复（快速hack） #

给内层进度条添加与外层容器背景色一致的左侧边框，覆盖渲染出的异常竖线：

.innerBar {
  border-top-left-radius: .25em;
  border-bottom-left-radius: .25em;
  /* 替换为外层容器的背景色 */
  border-left: 1px solid #ffffff;
  /* 保留其他原有样式 */
}

此方法适合快速临时修复，需确保边框颜色与外层背景色完全匹配，避免出现视觉偏差。

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