If you code like this <h1>Discover <span>Something</span></h1> with span tag inside it 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. h1 { background: -webkit-linear-gradient(45deg, $gold 20%, #00ff95); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
Can you attach a small HTML testcase please?
Created attachment 348662 [details] Here's the small HTML testcase attach
<rdar://problem/43951596>
Were you able to see the preview of each browser differently? I hope my code helps. Thank you!
Do you have any questions?
Yes, I can reproduce the problem. Thanks for the testcase!
Hi, Is there any follow-up on this ticket? I have just created a reproduction test case here: https://codepen.io/bakura10/pen/QWmVmEP In our use case, I need the inner span to be a display inline-block to set a min-width to perform a transition (while the parent needs to stay inline to apply the background and not cut it properly). Unfortunately, in this situation, Safari does not display the inline-block part (Chrome and Firefox have no issue).