Text gradient doesn't work on Safari

[threeoten]

I’m trying to use the following CSS applied to a headline element and it works fine everywhere but not in Safari. It doesn’t render at all. How can I get it to render in Safari?:

.mission{
background: #DE90DE;
background: -webkit-linear-gradient(to right, #DE90DE 0%, #8F1344 100%);
background: -moz-linear-gradient(to right, #DE90DE 0%, #8F1344 100%);
background: linear-gradient(to right, #DE90DE 0%, #8F1344 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

[friech]

Hi @threeoten,

Thank you for writing in, please follow the solution provided on this thread.

Please note that we do not provide any customization support here in the forum. If you are unfamiliar with code and resolving potential conflicts, you may opt-in on our One service for further assistance.

Cheers,

[threeoten]

Yes, I can google too. That topic isn’t even regarding the same issue.

Someone on the Pro Theme & X Theme Facebook group found a solution for me. For anyone else who may find this in a search, here’s what worked for me…

Using my CSS above, instead of “.mission” as the selector, it should be “.mission .x-text-content-text-primary”. Works in Safari now.

[tristup]

Hi @threeoten,

Glad that you have shared the solution with the others.

Thanks