不同浏览器border插值渲染差异及红圈显示问题问询

问题原因分析 #

这个现象既不是border插值的浏览器特异性，也不是单纯的渲染bug，本质是不同浏览器内核对带border-radius的overflow: hidden裁剪逻辑的实现差异导致的。 #

具体逻辑拆解 #

1. 你的代码逻辑本身预期是全白显示：外层div为200200圆形裁剪容器，内部SVG先后绘制300300红色矩形、400*400白色矩形，白色矩形理论上会完全覆盖红色矩形，最终显示全白。
2. Chrome、Safari使用的Blink/WebKit内核的裁剪逻辑是：先对每个子元素单独做圆角裁剪，再将裁剪后的子元素做合成。裁剪边缘的抗锯齿处理会给每个子元素的边缘增加半透明效果，白色矩形的边缘半透明后，就会透出下方已经完成裁剪的红色矩形，最终呈现出红色的边缘圆环。
3. Firefox使用的Gecko内核的裁剪逻辑是：先将容器内所有子元素合成一张完整位图，再统一做圆角裁剪。此时裁剪边缘的抗锯齿是在合成后的全白位图上处理，不会透出下层的红色，所以最终显示为全白。

解决办法 #

你可以用以下任意一种方法对齐各浏览器表现：

• 给外层div增加background: white属性，抗锯齿混合时会和白色容器背景混合，不会透出红色
• 用clip-path: circle(50%)替代border-radius + overflow: hidden实现圆形裁剪，该属性的裁剪逻辑在各浏览器实现更统一
• 调整内部绘制逻辑，避免出现底层颜色被上层完全覆盖、仅裁剪边缘透出的场景

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