Safari on iOS not displaying text when using background-clip and text-fill-color combined with some pseudo elements

user_8268661 0
Viewed 13729

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!

invisible safari css text iphone
8 Answers

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

-webkit-box-decoration-break: clone;
user_15389010
user_1593190

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.

user_126155780

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

user_155994080

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

user_85945420

This works for me:

text-shadow: 0px 0px transparent;

Source

user_50429280 
-webkit-background-clip: text

should work

user_179255250
Related