Safari/iOS下CSS text-shadow像素化问题，Chrome无此异常

问题描述 #

在Safari浏览器中，带有大模糊半径text-shadow的超大字号标题出现像素化方块，但相同代码在Chrome中渲染正常。相关CSS代码如下：

.title {
    min-width: 100vw;
    min-height: 100vh;
    font-size: calc(50px + 5vmin);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    text-shadow: 0px 0px 60px black;
    user-select: none;
}

渲染效果对比 #

• Chrome渲染效果：
  
• Safari渲染效果：
  

原因分析 #

这是Safari浏览器text-shadow渲染引擎的特性限制：当处理超大字号+大模糊半径的阴影时，Safari的模糊算法会因为精度问题出现像素化块。Chrome的Blink引擎与Safari的WebKit引擎在阴影模糊的采样方式、抗锯齿处理上存在差异，前者对大尺寸阴影的渲染优化更到位。

解决方案 #

1. 多层text-shadow叠加替代单一大模糊 #

用多个小模糊半径的阴影叠加模拟大模糊效果，Safari渲染会更平滑：

.title {
    /* 其他属性保留 */
    text-shadow: 
        0 0 20px black,
        0 0 40px black,
        0 0 60px black;
}

2. 改用filter: drop-shadow() #

filter: drop-shadow()的模糊算法在Safari中表现更稳定，效果与text-shadow接近，参数顺序为offset-x offset-y blur-radius color：

.title {
    /* 移除原来的text-shadow */
    filter: drop-shadow(0 0 60px black);
}

注意：drop-shadow会作用于整个元素的轮廓，而text-shadow仅作用于文字，若元素带有背景色需调整使用场景。

3. 触发硬件加速优化渲染 #

给元素添加轻微3D变换触发硬件加速，可改善Safari的渲染精度：

.title {
    /* 其他属性保留 */
    transform: translateZ(0);
    -webkit-transform: translateZ(0); /* Safari前缀兼容 */
}

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