21

I'm having a hard time solving this mystery. I have created a "knockout text" effect and added a separator using :after to a h2. It looks great on everything I've tested it on except for Safari on iOS (10.3.2).

Link to fiddle with a broken and temporary fix.

h2.gradient {
    color: #013c65;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 2em;
    line-height: 1em;
    background: linear-gradient(1deg, #800909, #332222);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-background-clip: text;
    -moz-text-fill-color: transparent;
    -ms-background-clip: text;
    -ms-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}
h2.gradient:after {
    content: '';
    position: relative;
    display: block;
    height: .12em;
    width: 2.5em;
    background-image: linear-gradient(1deg, #800909, #332222);
    top: .5em;
}

Looks like the problem seems to be with combining background-clip: text;, text-fill-color: transparent;, and with the pseudo element: display: block;.

I am able to absolute position and display inline-block the pseudo element. For the time being, I've wrapped the header in <div class="special-heading"> and added separator after the div.

Would there be a reason why iOS doesn't like this or has anyone else experienced similar problems? I've found that adding a zero-width space &#8203; magically makes it work.

I'm thinking this might be a bug, however, because I am able to get the original method working occasionally with the web inspector open on my Mac.

Thanks for your thoughts!

Logan Garcia
  • 211
  • 1
  • 2
  • 5
  • I have the same issue and the ​ fixes the problem for me as well. – Evan Michael Kyle Aug 28 '17 at 03:14
  • Yes, the text clip property has bugs on many devices. I faced one on a android device (while on many other android devices it had worked), where I used the same on a button tag, didn't work, but worked well on a div tag. Try changing the h2 tag to a div. If it works, then its a bug. – Ajay Singh Nov 17 '17 at 21:13

8 Answers8

29

Found this fix. Add this to the element that has the properties that create gradient text:

-webkit-box-decoration-break: clone;
Chevas Balloun
  • 435
  • 4
  • 10
  • 3
    The only one that works for me... specially for multi-line text! – Black Sheep Jan 22 '21 at 09:49
  • 1
    Nice! This does fix my multi line text disappearing but also clones the animation on the new line (doesn't look at good including on desktop browsers where it's working e.g. Chrome and FF) – Dominic Feb 03 '21 at 11:38
27

I faced similar issue and found alternative solution in separate thread.

The idea is to change display property to inline: display: inline. Doesn't require "HTML hacks".

Although this fix might not fit your layout needs, that's the only solution that worked for me from CSS perspective.

Source

skryvets
  • 2,808
  • 29
  • 31
  • 1
    Thanks! `display:inline;` was actually getting declared on the `h2` of my code, it just didn't make it over to the fiddle ;) `display:inline-block` works for me when the text breaks (which was my issue because all of my headings were breaking to new lines). – Logan Garcia Feb 13 '21 at 01:20
4

There is a bug in the official safari bug tracker. Unfortunately it looks like nobody has looked into it for the last two years:

https://bugs.webkit.org/show_bug.cgi?id=169125

jantimon
  • 36,840
  • 23
  • 122
  • 185
3

Found another stupid trick for this, wrapping the text element within a span (an inline element by nature). Worked like a charm on your fiddle.

Florent
  • 31
  • 1
  • This was an error on my part — `display:inline;` was getting declared on the `h2` in my code, it just didn't make it's way over to the fiddle ;) – Logan Garcia Feb 13 '21 at 01:17
2

Fix that worked for me without breaking the layout is changing the tag to display: list-item;

Seems that you just need to play with display property that matches your needs.

end of 2021 and still this bug persists

Artur Farmanov
  • 31
  • 1
  • 4
0

I have the same issue, it is caused by a persistent safari bug, for fix it use attribute display with the property "inline" or "inline-block" to the main element, in your case h2.gradient

Gabriele Fagnani
  • 112
  • 12
0

This works for me:

text-shadow: 0px 0px transparent;

Source

Zach Jensz
  • 3,650
  • 5
  • 15
  • 30
Louie Sonugan
  • 1
  • 1
-3
-webkit-background-clip: text

should work

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
Rohit Moorjani
  • 1