| Summary: | -webkit-background-clip: text doesn't work across element boundaries | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Aaron <me> | ||||
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | mic.gallego, mmaxfield, simon.fraser, webkit-bug-importer, zalan | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari Technology Preview | ||||||
| Hardware: | Mac | ||||||
| OS: | All | ||||||
| Attachments: |
|
||||||
Can you attach a small HTML testcase please? Created attachment 348662 [details]
Here's the small HTML testcase attach
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). |
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; }