Safari浏览器下旋转文本使用线性渐变背景裁剪出现异常线条问题

问题原因 #

这是Safari浏览器内核独有的渲染Bug：当元素同时应用background-clip: text和transform变换属性时，文字边缘的背景裁剪计算出现偏差，会溢出和渐变颜色一致的多余线条。

可行解决方案 #

• 方案1：强制开启GPU渲染
  给设置了渐变文字的子元素添加translateZ(0)触发硬件加速，修复软渲染的计算错误，修改后span样式如下：

span{
    background: -webkit-linear-gradient(var(--RBI-color-red), var(--RBI-color-red));
    background: -moz-linear-gradient(var(--RBI-color-red), var(--RBI-color-red));
    background: -o-linear-gradient(var(--RBI-color-red), var(--RBI-color-red));
    background: linear-gradient(var(--RBI-color-red), var(--RBI-color-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* 新增以下代码 */
    transform: translateZ(0);
}

• 方案2：添加透明文字描边
  给span添加1px的透明描边，覆盖边缘的异常溢出区域：

span{
    /* 原有样式不变，新增以下代码 */
    -webkit-text-stroke: 1px transparent;
}

• 方案3：调整transform绑定对象
  将原本加在父容器.big-date-wrapper上的旋转属性，移到每个span元素上，避免父容器变换触发子元素裁剪异常。
• 方案4：纯色场景直接替换实现方式
  如果你的渐变仅使用单一颜色（和示例代码一致，渐变首尾颜色完全相同），可以直接删除所有渐变相关代码，用普通color: var(--RBI-color-red)设置文字颜色，完全规避该渲染问题。

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