Created attachment 451357 [details] Artefacts near edges of text container Good day! ----- Safari Version 15.2 (17612.3.6.1.6). This issue has been around for many previous Safari versions. MacOS 12.1 Monterey (Macbook Pro 2019), graphics: AMD Radeon Pro 5300M 4 GB, Intel UHD Graphics 630 1536 MB ----- When using linear-gradient with `background-clip: text` on a <div> node with text, artifacts appear at the edges of the container, only in the Safari browser (see attached image). CSS example: content: attr(data-text); width: 100%; left: 0; top: 0; position: absolute; background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5%, #fff5e3 5%, #fff5e3 40%, #e8c272 60%, #e8c272 95%, rgba(0, 0, 0, 0) 95%, rgba(0, 0, 0, 0) 100%); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; -webkit-background-clip: text; -webkit-text-fill-color: transparent; This behavior forces us to do unnecessary hacks like creating images with gradients to make it work consistently across all modern browsers. CSS fix: background-image: url('data:image/png;base64,...')
Created attachment 451358 [details] MacOS version
Created attachment 451359 [details] CSS
Thanks for the report. This is a duplicate of bug 179333. *** This bug has been marked as a duplicate of bug 179333 ***