使用CSS -webkit-text-outline属性时轮廓出现异常伪影如何修复

这个伪影是webkit内核下非标准-webkit-text-outline属性的典型渲染问题，和浏览器本身无关，是属性使用方式和叠加样式冲突导致的，按以下优先级排查修复即可：

• 首选替换方案：直接弃用非标准的-webkit-text-outline，用多层text-shadow模拟文字轮廓，这个方案渲染逻辑稳定，不会受合成层规则影响出现伪影，适配所有webkit内核浏览器，示例代码：

/* 替换原有的 -webkit-text-outline 写法，比如原属性是2px宽度黑色轮廓，就用以下代码 */
.your-text-class {
  color: #fff; /* 你的文字填充色 */
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}
/* 需要更粗的轮廓时，按0.5px~1px的梯度增加多方向阴影偏移即可，不会出现边缘破碎 */

• 如果必须保留-webkit-text-outline写法，先排查文本元素本身是否挂载了以下会触发独立合成层的属性，把这类属性全部转移到文本的父容器上，不要直接作用在设置了轮廓的文本元素上：
  • transform 变换类属性
  • filter 滤镜属性
  • will-change 声明（值为transform/filter/opacity时都会触发）
  • 小于1的opacity透明度值
• 匹配轮廓宽度与字重：如果使用的是font-weight小于500的细体字，-webkit-text-outline的宽度不要超过1px，过宽的轮廓会向内覆盖字形填充区域，渲染时出现锯齿状杂色。
• 兜底抗锯齿设置：给文本元素加上-webkit-font-smoothing: antialiased;，强制webkit使用亚像素抗锯齿渲染字形路径，减少边缘毛刺。

注：同类型无伪影的站点实现本质上是做了两层处理：一是没有给带轮廓的文本元素叠加任何触发合成层的属性，二是严格控制了轮廓宽度和字重的比例，目前这类站点也在逐步将-webkit-text-outline替换为text-shadow方案，规避不同webkit版本的渲染差异。

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