css - 使用 -webkit-background-clip、-webkit-text-fill-color 和渐变时 Safari 上的奇怪工件

Question

所以，我这里有这个标题文本:

正如您所看到的，在带有渐变的文本上方有一条奇怪的线。该文本的 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。我尝试了很多东西，但似乎没有什么可以解决的。有什么想法吗？

编辑:显示它确实是文本的一部分的另一张图片:

Answer 1

我刚刚发现了同样的问题。

这是我的情况(与你相似)

Screenshot

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

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

但要不更改您的内容，只需将其添加到您的 css 中即可:

字母间距:0.0075rem;

尝试使用多个值来摆脱这条线。

希望这会对某人有所帮助!