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

Admin 1
Viewed 1722

So, I have this title text here:

enter image description 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:

enter image description here

safari webkit macos css
9 Answers

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 !

user_104598200

My fix was to use a png for the background, instead of a jpg, with transparent pixels around the edge of the image. This hides the hairline that was appearing only at specific scales. Modifications to the CSS never seems to make a difference.

user_41670890

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.

user_108603360

I also encountered this issue on iOS Safari. My solution was to set the background-origin property:

background-origin: content-box;

which seems to align the background better so it does not overflow.

user_44328050

Nothing suggested here worked for me, unfortunately. However, I was also lucky enough to have my gradient text over a solid color that I would know in advance - so I used a mask using the "::after" pseudo-selector to hide the line:

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

Hope this helps others!

user_52255030

I had same issue i fix it adding :

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

But don't work if you have animation.

user_139403220

Hello everyone who found this question but didn't found useful answer:

Using

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

Fixes this weird border glitch in Safari.

user_87614610

I checked the propositions of @dakota-m, @konstantin-nesterov, @raphael-ait-el-alim and @nibnut.

They all seem to do the same: Changing the rendering to such a small degree that there is no perceivable visual difference. But since the mentioned artifacts are obviously a bug that occurs for certain combinations of rendering values, the proposed fixes just found a set that does not provoke the bug.

Example (it's about the frame surrounding the first three screenshots):

  • h1 { font-size: 163px; } enter image description here
  • h1 { font-size: 164px; } enter image description here
  • h1 { font-size: 165px; } enter image description here
  • h1 { font-size: 166px; } enter image description here
  • h1 { font-size: 167px; } enter image description here

So, the actual workaround is to play around with any value that affects the rendering.

And the solution is to file a bug (which I just did at https://www.apple.com/feedback/safari.html).

user_22137940 
background-size: calc(100% - 1px) 100%;
background-position: center;
background-repeat: no-repeat;

Won't help if background-color is different than transparent

user_200106780
Related