RESOLVED DUPLICATE of bug 167406266566
-webkit-background-clip does not working with text-overflow: ellipsis 
https://bugs.webkit.org/show_bug.cgi?id=266566
Summary -webkit-background-clip does not working with text-overflow: ellipsis
Anastasia
Reported 2023-12-18 00:57:20 PST
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>HTML + CSS</title> </head> <style> .text { dispay: block; width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background-image: linear-gradient(45deg, #f3ec78, #af4261); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } </style> <body> <div class="text"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores ratione ea quibusdam quam quia placeat. Quasi, odio voluptatum illo accusamus cupiditate deserunt corrupti in laborum dolorem sint reprehenderit similique exercitationem. </span> </body> </html> Ellipsis is not displayed after text with a gradient in Safari and Firefox. But it works in chrome and opera
Attachments
Chrome Canary 122 & STP184 - Reference Screenshot (370.37 KB, image/png)
2023-12-18 09:12 PST, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2023-12-18 00:57:28 PST
<rdar://problem/119802002>
Ahmad Saleem
Comment 2 2023-12-18 09:11:43 PST
It is reproducible in Safari Technology Preview 184 as well.
Ahmad Saleem
Comment 3 2023-12-18 09:12:47 PST
Created attachment 469111 [details] Chrome Canary 122 & STP184 - Reference Screenshot
Karl Dubost
Comment 4 2023-12-18 19:37:14 PST
Anastasia, Thanks for the report Probably a duplicate of Bug 167406 Also probably Bug 179334
Simon Fraser (smfr)
Comment 5 2024-08-09 17:08:41 PDT
*** This bug has been marked as a duplicate of bug 167406 ***
Note You need to log in before you can comment on or make changes to this bug.