Bug 236358 – Text with linear gradient using background clip has artifacts

• Component: CSS
• Status: RESOLVED DUPLICATE

[Andris Vilde]

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,...')

[Andris Vilde]

Created attachment 451358 [details]
MacOS version

[Andris Vilde]

Created attachment 451359 [details]
CSS

[Simon Fraser (smfr)]

Thanks for the report. This is a duplicate of bug 179333.

*** This bug has been marked as a duplicate of bug 179333 ***