Weird artifacts on Safari when using -webkit-background-clip, -webkit-text-fill-color and gradient

Question

So, I have this title text here:

And as you can see, there's a weird line above the text with gradient. The CSS for that text is the following:

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

I'm using MacOS Sierra and Safari 10.1. I've tried many thing but nothing seems to fix it. Any ideas?

Edit: Another image to show it really is part of the text:

Answer 1

I've just figured out the same issue.

Here is my case (similar to you)

Screenshot

I've also tried a lot of things, it's really weird, but it seems that this problem can be solved by adding extra characters or spaces after the text (  in HTML).

Just try adding some characters to your text and you will see.

But to not change your content just add this in your css :

letter-spacing: 0.0075rem;

Try with many values to get rid of this line.

Hope this will help someone !

Answer 2

I had the exact same issue, a line showing up when using -webkit-background-clip: text and only on Safari. None of the previous suggestions helped, but I ended up finding that it was a transform set on a parent element that was causing the issue.

I had to adjust the styling to not use a transform, but after doing so the line disappeared.