使用background-clip: text在Safari中出现异常线条的求助

问题描述 #

使用CSS实现渐变文字效果时，Chrome和Firefox显示正常，但Safari浏览器中文字边框外出现异常线条。相关代码如下：

CSS代码：

h1 {
    font-family: "Work Sans", Helvetica, Arial, sans-serif;
}

.highlighted {
    color: transparent;
    background: linear-gradient(90deg, #FF008B, #FF006B);
    background-clip: text;
    -webkit-background-clip: text;
}

HTML代码：

<h1>Welcome to <span class="highlighted">My site</span></h1>

修复方案 #

针对Safari的渲染bug，可通过以下几种方式解决：

方法1：补充 -webkit-text-fill-color 属性 #

在 .highlighted 类中添加 -webkit-text-fill-color: transparent;，让Safari更精准识别文字填充规则，替代或配合 color: transparent 使用：

.highlighted {
    color: transparent;
    -webkit-text-fill-color: transparent; /* 新增属性 */
    background: linear-gradient(90deg, #FF008B, #FF006B);
    background-clip: text;
    -webkit-background-clip: text;
}

方法2：添加透明文本阴影 #

给渐变文字设置透明文本阴影，覆盖异常线条：

.highlighted {
    color: transparent;
    background: linear-gradient(90deg, #FF008B, #FF006B);
    background-clip: text;
    -webkit-background-clip: text;
    text-shadow: 0 0 0 transparent; /* 新增属性 */
}

方法3：修改元素显示类型 #

将 <span> 改为 inline-block 类型，避免Safari对行内元素的渲染异常：

.highlighted {
    display: inline-block; /* 新增属性 */
    color: transparent;
    background: linear-gradient(90deg, #FF008B, #FF006B);
    background-clip: text;
    -webkit-background-clip: text;
}

其中方法1是最常用且有效的方案，可直接解决Safari的渐变文字渲染问题。

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