Safari doesn't render css gradient text - html

Question

I'm trying to make gradient text in webkit browsers using this CSS code:
.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
it works perfectly in Chrome, but in Safari (both 8 and 9) it doesn't render gradient text unless you select it via mouse click+drag over it.
HTML is as follows:
<p class = "text">Hello world.</p>
Spent 2 evening on that. Found a lot of recommendations to use this method with couple issues similar to mine and no solutions at all. Would appreciate a lot if someone would help.
IMPORTANT UPDATE:
I've found out, that this code works great when applied to single <p> element, but fails to render in Safari (not in chrome) when applied to div wrapper to single or multiple <p> elements like this:
<div class = "text">
<p>First line.</p>
<p>Second, way longeeeeeeer line. </p>
<p>Third line, just to see gradient span over multiple lines. </p>
</div>
Any thoughts why this could be the case or how to overcome this?

Answer 1

I found a simple fix for this
.text, span {
display: block;
}

Answer 2

I know it's an old question but in case someone still needs it: I had the same problem and what worked for me was to add a text-shadow to it and make the shadow transparent.
.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px #00000000; <--
}
Note that I added '00' to the end of the HEXA code which leads to transparency if someone doesn't know!

Answer 3

If you code like this <h1>Discover <span>Something</span></h1> then text gradient won't appear in Safari but does appear fine in Chrome and Firefox.
If you do like this <h1>Discover Something</h1> without span tag then it does work properly. I don't think Safari liked tags inside the tag. Nasty bug. It works on other browsers like Chrome and Safari.

Answer 4

If you have a two lines text and in Safari does not works, try:
-webkit-box-decoration-break: clone;

Answer 5

flex or inline-flex are the problems if you are using it.
block or inline-block are fixing the problem

Answer 6

This remains a Safari bug as of May 2018. The gradient properly appears if the text is first highlighted, and then unhighlighted.
I was able to use the following alternative:
.text {
-webkit-mask-image: linear-gradient(blue, green);
}
This is working in Safari 11, iOS Safari 11, Chrome 66, and Firefox 60.
Inspired by https://stackoverflow.com/a/45136579/9772439

Answer 7

I had the same problem with b tag, and solve it with property
display: inline-block;

Answer 8

I had the same issue and it looks like it's a Safari bug.
I noticed that the issue only happens when your cascading elements are block types.
My hack for this went like this
<div class = "text">
<span>First line.</span>
<p></p>
<span>Second, way longeeeeeeer line. </span>
<p></p>
<span>Third line, just to see gradient span over multiple lines.</span>
<p></p>
</div>
The only reason I have the paragraph tags is for spacing since adding a display block on the spans will trigger the bug again.

Answer 9

For me, the easiest way to archive this is drawing text as image, contain shadow... And put it in background css.

Answer 10

If you have tried all of the above and none are working, check to see if you have a Pseudo element on the tag.
Safari doesn't like it if these are static so you'll need to position them absolute.

Answer 11

I have the same issue, for fix it use attribute display with the property "inline" or "inline-block" to the main element, in your case p.text