Summary: | Text with linear gradient using background clip has artifacts | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Andris Vilde <vilde.andris> | ||||||||
Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||||||
Status: | RESOLVED DUPLICATE | ||||||||||
Severity: | Normal | CC: | mmaxfield, simon.fraser, zalan | ||||||||
Priority: | P2 | ||||||||||
Version: | Safari 15 | ||||||||||
Hardware: | Unspecified | ||||||||||
OS: | Unspecified | ||||||||||
Attachments: |
|
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 *** |
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,...')