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

我的解决方法是在图像的边缘周围使用透明像素作为背景的png而不是jpg。这将隐藏仅以特定比例显示的发际线。修改CSS似乎没有任何作用。

Answer 2

我遇到了完全相同的问题，在使用-webkit-background-clip：text时出现了一行，仅在Safari上显示。先前的建议均无济于事，但最终我发现这是导致问题的父元素上设置的转换。

我不得不调整样式以不使用变换，但是这样做之后，该行消失了。

Answer 3

我在 iOS Safari 上也遇到过这个问题。我的解决方案是设置 background-origin 属性：

background-origin: content-box;

这似乎更好地对齐背景，因此它不会溢出。

Answer 4

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

这是我的情况（与您相似）

Screenshot

我也尝试了很多事情，这确实很奇怪，但是似乎可以通过在文本之后添加额外的字符或空格（HTML中的代码）来解决此问题。

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

但是要不更改内容，只需在CSS中添加它：

letter-spacing: 0.0075rem;

尝试使用许多值来摆脱这一行。

希望这会帮助某人！

Answer 5

不幸的是，这里没有建议对我有用。但是，我也很幸运能够将渐变文本显示在预先知道的纯色上，因此我使用了一个使用伪造“ :: after”伪装符的遮罩来隐藏行：

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

希望这对其他人有帮助！

Answer 6

我遇到了同样的问题，我在添加时解决了这个问题：

-webkit-mask-image: linear-gradient(180deg, #8dc9fb 0, #fff 100%);

但是如果您有动画，则不起作用。

Answer 7

大家好，发现这个问题但没有找到有用的答案：

使用

background-repeat: no-repeat;
background-origin: content-box;

修复了 Safari 中这个奇怪的边框故障。

Answer 8

我检查了@dakota-m、@konstantin-nesterov、@raphael-ait-el-alim 和 @nibnut 的提议。

他们似乎都在做同样的事情：将渲染更改到如此小的程度，以至于没有可感知的视觉差异。但是由于提到的工件显然是针对某些渲染值组合出现的错误，因此建议的修复程序只是找到了不会引发错误的集合。

示例（关于前三个屏幕截图的框架）：

因此，实际的解决方法是使用影响渲染的任何值。

解决方案是提交一个错误（我刚刚在 https://www.apple.com/feedback/safari.html 做了这个）。