189152 2018-08-30 06:48:44 -0700 background-clip: text doesn't work on inline-block child of inline element 2024-08-09 17:09:58 -0700 1 1 1 Unclassified WebKit CSS Safari Technology Preview Mac All NEW https://bugs.webkit.org/show_bug.cgi?id=245480 BrowserCompat, InRadar P2 Normal --- 1 me webkit-unassigned mic.gallego mmaxfield simon.fraser webkit-bug-importer zalan oldest_to_newest 1455201 0 me 2018-08-30 06:48:44 -0700 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; } 1455787 1 simon.fraser 2018-08-31 11:35:52 -0700 Can you attach a small HTML testcase please? 1455804 2 348662 me 2018-08-31 12:35:31 -0700 Created attachment 348662 Here's the small HTML testcase attach 1455806 3 webkit-bug-importer 2018-08-31 12:45:18 -0700 <rdar://problem/43951596> 1456302 4 me 2018-09-04 07:35:53 -0700 Were you able to see the preview of each browser differently? I hope my code helps. Thank you! 1463052 5 me 2018-09-24 18:14:23 -0700 Do you have any questions? 1464606 6 mmaxfield 2018-09-28 16:39:36 -0700 Yes, I can reproduce the problem. Thanks for the testcase! 1890813 7 mic.gallego 2022-08-11 22:25:52 -0700 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). 2051600 8 simon.fraser 2024-08-08 21:38:26 -0700 This works correctly now. 2051601 9 simon.fraser 2024-08-08 21:39:53 -0700 Well, the attachment works, but the codeine still shows an issue. 2051602 10 472093 simon.fraser 2024-08-08 21:43:08 -0700 Created attachment 472093 Simple text case 348662 2018-08-31 12:35:31 -0700 2018-08-31 12:35:31 -0700 Here's the small HTML testcase attach index.html text/html 1355 me CgoKCjwhZG9jdHlwZSBodG1sPgo8aHRtbCBsYW5nPSJlbiI+CjxoZWFkPgo8bWV0YSBjaGFyc2V0 PSJ1dGYtOCI+Cjx0aXRsZT5UZXh0IEdyYWRpZW50PC90aXRsZT4KPHN0eWxlPgoqIHttYXJnaW46 MDtwYWRkaW5nOjA7Zm9udC1mYW1pbHk6IHNhbnMtc2VyaWY7dGV4dC1hbGlnbjogY2VudGVyfQpi b2R5IHsKCWJhY2tncm91bmQ6IGJsYWNrOwoJY29sb3I6IHdoaXRlOwoJcGFkZGluZzogMCA0MHB4 Owp9CmgxIHsKYmFja2dyb3VuZDogLXdlYmtpdC1saW5lYXItZ3JhZGllbnQoNDVkZWcsICNmNGJi MzMgMjAlLCAjMDBmZjk1KTsKLXdlYmtpdC1iYWNrZ3JvdW5kLWNsaXA6IHRleHQ7Ci13ZWJraXQt dGV4dC1maWxsLWNvbG9yOiB0cmFuc3BhcmVudDsKZGlzcGxheTogaW5saW5lLWJsb2NrOwpmb250 LXNpemU6IDIwMHB4Owp9CmgxIC5ibG9jayB7ZGlzcGxheTogYmxvY2s7fQpoMSAuaW5saW5lLWJs b2NrIHtkaXNwbGF5OiBpbmxpbmUtYmxvY2s7fQo8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgoKCTxo MT5IZWxsbyBXb3JsZDwvaDE+Cgk8cD5Cb3RoIFNhZmFyaSBhbmQgU2FmYXJpIFRlY2hub2xvZ3kg UHJldmlldyB3b3JrcyBhcyB3ZWxsIGFzIENocm9tZSBhbmQgRmlyZWZveC4gVGhpcyBIMSBkb2Vz IG5vdCBoYXZlIGFueSB0YWdzIGluc2lkZS48L3A+Cgk8YnI+Cgk8aDE+SGVsbG8gPHNwYW4gY2xh c3M9ImJsb2NrIj5Xb3JsZDwvc3Bhbj48L2gxPgoJPHA+RG9lcyBub3Qgd29yayB3aXRoIFNhZmFy aSBhbmQgU2FmYXJpIFRlY2hub2xvZ3kgUHJldmlldyB3aXRoIHRhZyBpbnNpZGUuIEhpZ2hsaWdo dCAoQ01EICsgQSkgdGhpcyBwYWdlIGFuZCB0aGVuIHJlbW92ZSB0aGUgaGlnaGxpZ2h0IGFuZCBp dCdzIHJpZ2h0IHRoZXJlLiBUaGlzIEgxIGRvZXMgaGF2ZSBTUEFOIHRhZyBpbnNpZGUgYW5kIGlz IHNldCB0byAiZGlzcGxheTogYmxvY2siLiBXb3JrcyBub3JtYWwgb24gQ2hyb21lIGFuZCBGaXJl Zm94LjwvcD4KCTxoMT5IZWxsbyA8c3BhbiBjbGFzcz0iaW5saW5lLWJsb2NrIj5Xb3JsZDwvc3Bh bj48L2gxPgoJPHA+RG9lcyBub3Qgd29yayB3aXRoIFNhZmFyaSBhbmQgU2FmYXJpIFRlY2hub2xv Z3kgUHJldmlldyB3aXRoIHRhZyBpbnNpZGUuIEhpZ2hsaWdodCAoQ01EICsgQSkgdGhpcyBwYWdl IGFuZCB0aGVuIHJlbW92ZSB0aGUgaGlnaGxpZ2h0IGJ1dCBkb2VzIG5vdCB3b3JrLiBUaGUgIldv cmxkIiBpcyBub3doZXJlIHRvIGJlIHNlZW4uIFRoaXMgSDEgZG9lcyBoYXZlIFNQQU4gdGFnIGlu c2lkZSBhbmQgaXMgc2V0IHRvICJkaXNwbGF5OiBpbmxpbmUtYmxvY2siLiBEb2VzIG5vdCB3b3Jr IG9uIENocm9tZSBhbmQgRmlyZWZveC48L3A+Cgo8L2JvZHk+CjwvaHRtbD4= 472093 2024-08-08 21:43:08 -0700 2024-08-08 21:43:08 -0700 Simple text case background-clip-across-inlines.html text/html 539 simon.fraser PCFET0NUWVBFIGh0bWw+CjxodG1sPgo8aGVhZD4KICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBj b250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSwgc2hyaW5rLXRvLWZp dD1ubyI+CiAgICA8c3R5bGU+CiAgICAgICAgOnJvb3QgewogICAgICAgICAgICBmb250LXNpemU6 IDI0cHQ7CiAgICAgICAgfQogICAgICAgIC50b3AgewogICAgICAgICAgYmFja2dyb3VuZDogbGlu ZWFyLWdyYWRpZW50KHRvIHJpZ2h0LCBibHVlLCByZWQpOwogICAgICAgICAgYmFja2dyb3VuZC1j bGlwOiB0ZXh0OwogICAgICAgICAgY29sb3I6IHRyYW5zcGFyZW50OwogICAgICAgIH0KCiAgICAg ICAgLmJvdHRvbSB7CiAgICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7CiAgICAgICAgfSAg ICAgICAgCiAgICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5PgogICAgPHNwYW4gY2xhc3M9InRvcCI+ CiAgICAgICAgPHNwYW4gY2xhc3M9ImJvdHRvbSI+T25lIHR3bzwvc3Bhbj4gdGhyZWUgZm91cgog ICAgPHNwYW4+CjwvYm9keT4KPC9odG1sPgo=