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:

Does the line also appear in other browsers? And are you sure it's part of this text; it looks like it's something else. Can you make a [mcve]? — Mr Lister, Sep 28 '17 at 09:56
I've edited the OP so you can see another example from the same website. Only happens in Safari. The second example, actually, appear and disappear depending on the size of the window. I'll try to make a MCV as soon as I get the change. — , Sep 28 '17 at 10:11

score 2 · Answer 1 · answered Oct 05 '18 at 05:32

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 !

score 1 · Answer 2 · answered Jan 03 '19 at 21:48

1

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.

answered Jan 03 '19 at 21:48

Andrew Keplinger

11
1

score 1 · Answer 3 · edited Nov 17 '20 at 22:45

1

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.

edited Nov 17 '20 at 22:45

Dharman

30,962
25
85
135

answered Nov 17 '20 at 22:39

Dakota M

11
1
2

score 1 · Answer 4 · answered Jan 20 '21 at 08:23

1

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.

answered Jan 20 '21 at 08:23

Konstantin Nesterov

11
2

score 0 · Answer 5 · answered Feb 18 '20 at 20:04

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!

score 0 · Answer 6 · answered Jul 16 '20 at 07:23

0

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.

answered Jul 16 '20 at 07:23

パルパコ

1

score 0 · Answer 7 · answered Mar 26 '21 at 20:02

0

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.

answered Mar 26 '21 at 20:02

DarkLordCoder

33
1
7

score 0 · Answer 8 · answered Aug 08 '21 at 22:17

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; }
h1 { font-size: 164px; }
h1 { font-size: 165px; }
h1 { font-size: 166px; }
h1 { font-size: 167px; }

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).

Bohdan Andriiv · Answer 9 · 2022-09-16T09:12:07.167

0

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

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

edited Sep 16 '22 at 09:12

answered Sep 16 '22 at 08:27

Bohdan Andriiv

1
1

score 0 · Answer 10 · answered Oct 27 '22 at 12:48

0

try this:

transform: translateZ(0);

answered Oct 27 '22 at 12:48

RickShao

56
3

score 0 · Answer 11 · answered Nov 06 '22 at 00:48

0

I fix it with:

    transform: translateY(-.5px);
    padding: .5px;
    background-repeat: no-repeat;
    background-origin: content-box;

answered Nov 06 '22 at 00:48

VaJoy Larn

113
13

score 0 · Answer 12 · answered Feb 03 '23 at 00:02

Remarkably, this issue still exists in Safari, and I found this question while trying to figure out a workaround. It seems to be a rounding error in the sizing of the clipped area vs the background being clipped, that results from transforms.

In my circumstances, it's being exposed at certain scaling or browser zoom levels (eg: pinch-zooming on iOS Safari), in a region with a scale transform being applied.

The various other tricks here helped make the issue less prominent, and I got to a point where it was almost gone with:

.gradient-text {
  background: linear-gradient(227.67deg, #0288fb, #25c0fb, #37fffb, #9b62ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* Each of the below seemed to improve matters */
  background-origin: content-box;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

But at some infrequent zoom/scale levels, it'd still sneak back.

What seems to have finally killed it is adding a transparent 1px border to cover the sub-pixel rounding error. With that, the translateZ and background-origin didn't seem to make a difference if I removed them, but the background-repeat is necessary to prevent the background just from extending to the edge of the border.

So I wound up with:

.gradient-text {
  background: linear-gradient(227.67deg, #0288fb, #25c0fb, #37fffb, #9b62ef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  border: 1px solid transparent;
  background-repeat: no-repeat;
  margin: -1px;
}

The negative margin is there because outlines didn't work and I didn't want this text to be nudged 1px out of alignment with other text in a column.

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

12 Answers12