[Webkit-unassigned] [Bug 236358] New: Text with linear gradient using background clip has artifacts

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=236358

            Bug ID: 236358
           Summary: Text with linear gradient using background clip has
                    artifacts
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: vilde.andris at gmail.com

Created attachment 451357

  --> https://bugs.webkit.org/attachment.cgi?id=451357&action=review

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

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20220209/276a6c1d/attachment-0001.htm>