RESOLVED CONFIGURATION CHANGED 175587
SVG logo on wtfismygs.com does not render properly as background-image 
https://bugs.webkit.org/show_bug.cgi?id=175587
Summary SVG logo on wtfismygs.com does not render properly as background-image
Thomas Wisniewski
Reported 2017-08-15 10:38:02 PDT
Steps to reproduce the problem: 1. Visit https://wtfismygs.com 2. Notice that "WTF IS MY" in the logo is red. 3. Open the same SVG background-image on the h1 tag in a new tab using the devtools. 4. Notice that "WTF IS MY" has a gradient fill instead of being red. The gradient fill of the "WTF IS MY" part of the SVG (id=j) doesn't appear to be processed in Blink/WebKit when the document is viewed as a background-image on the live page. It works fine when viewed as a stand-alone SVG document, and renders similarly to how Firefox and Edge render it as a background-image. The same SVG path element has a clip mask which is being referenced properly (id=k), but the fill on the same element is being ignored, almost as though its id cannot be found in the document (id=j). This issue was originally reported to webcompat.com: https://webcompat.com/issues/8870 Equivalent Chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=755601&can=2&q=svg%20background%20image&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
Attachments
Add attachment proposed patch, testcase, etc.
Simon Fraser (smfr)
Comment 1 2017-08-15 13:32:25 PDT
Both look fine in recent WebKit. Image url is http://wtfismygs.com/assets/burst-fail-14ee06451270c6a1bf23631cce49cc1fbb0044c3f552a25e51e721beceec51c2.svg Can you test in recent Safari Technology Preview?
Thomas Wisniewski
Comment 2 2017-08-15 15:43:27 PDT
Actually this is the SVG resource in question: https://wtfismygs.com/assets/logo-e142ffb48948714e1d103cf398ca5bd13e7be12fb302fe41458243648ff27e05.svg I just checked in the developer preview and it's still rendering with red text when viewed as part of the page, but with a different gradient fill for the text when viewed standalone. Just FYI, in the analogous Chrome issue report the Blink devs suspect this is due to the page serving CSP headers requesting to block inline styles (which this SVG has, style="mix-blend-mode:overlay"), but Blink isn't blocking it as expected.
Simon Fraser (smfr)
Comment 3 2017-08-15 15:56:53 PDT
Ah, was looking at the wrong image. Yes, this does reproduce in Safari.
Brent Fulgham
Comment 4 2022-07-15 16:30:36 PDT
Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.
Note You need to log in before you can comment on or make changes to this bug.