Css 使用-webkit背景剪辑，-webkit文本填充颜色和渐变时Safari上的奇怪工件

因此，我这里有一个标题文本：

正如你所看到的，文本上方有一条奇怪的线，带有渐变。 该文本的CSS如下所示：

color: #fff;
background: -webkit-linear-gradient(180deg, #8dc9fb 0, #fff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

我正在使用MacOS Sierra和Safari 10.1。我试过很多东西，但似乎没有什么能解决它。有什么想法吗

编辑：另一个图像显示它确实是文本的一部分：

---

我刚刚解决了同样的问题

这是我的案子（和你一样）

我也尝试过很多东西，这真的很奇怪，但似乎这个问题可以通过在文本后添加额外的字符或空格（在HTML中）来解决

只要尝试在文本中添加一些字符，您就会看到

但要不更改内容，只需在css中添加以下内容：

字母间距：0.0075rem

尝试使用多个值来删除此行

希望这能帮助别人
 我的修复方法是使用png作为背景，而不是jpg，在图像边缘周围使用透明像素。这隐藏了仅在特定比例下出现的发际线。对CSS的修改似乎从来没有起到任何作用。
不幸的是，这里没有任何建议对我有效。然而，我也很幸运地将渐变文本置于我事先知道的纯色之上，因此我使用了一个掩码，使用“：”after“伪选择器隐藏线条：

&::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-color: black;
}

希望这能帮助别人
 我也有同样的问题，我修复了它，添加了：

-webkit遮罩图像：线性梯度（180度，#8dc9fb 0，#fff 100%）

但是如果你有动画就不行。
我也有同样的问题，在使用-webkit背景剪辑时会出现一行：text，仅在Safari上出现。前面的建议都没有帮助，但我最终发现是父元素上的转换集导致了问题

我不得不调整样式以不使用变换，但这样做后，线条消失了。
我在iOS Safari上也遇到了这个问题。我的解决方案是设置属性：

背景来源：内容框；

这似乎能更好地对齐背景，使其不会溢出。
大家好，找到这个问题但没有找到有用答案的人：

使用

修复了Safari中这个奇怪的边界问题。
该行是否也出现在其他浏览器中？你确定这是本文的一部分吗；好像是别的什么东西。我已经编辑了这篇文章，这样你就可以从同一个网站上看到另一个例子了。只发生在狩猎中。实际上，第二个示例根据窗口的大小显示和消失。我一拿到零钱就试着做一辆MCV。
background-repeat: no-repeat;
background-origin: content-box;