Bug 189152 – background-clip: text doesn't work on inline-block child of inline element

• Component: CSS
• Status: NEW

[Aaron]

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;
}

[Simon Fraser (smfr)]

Can you attach a small HTML testcase please?

[Aaron]

Created attachment 348662 [details]
Here's the small HTML testcase attach

[Radar WebKit Bug Importer]

<rdar://problem/43951596>

[Aaron]

Were you able to see the preview of each browser differently? I hope my code helps. Thank you!

[Aaron]

Do you have any questions?

[Myles C. Maxfield]

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).

[Simon Fraser (smfr)]

This works correctly now.

[Simon Fraser (smfr)]

Well, the attachment works, but the codeine still shows an issue.

[Simon Fraser (smfr)]

Created attachment 472093 [details]
Simple text case