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

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

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

-webkit-box-decoration-break: clone;

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

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.