[Webkit-unassigned] [Bug 255701] New: SVG clip-path failing with backdrop-filter as of iOS ~16.4.1

[bugzilla-daemon at webkit.org]

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

            Bug ID: 255701
           Summary: SVG clip-path failing with backdrop-filter as of iOS
                    ~16.4.1
           Product: WebKit
           Version: Safari 16
          Hardware: iPhone / iPad
                OS: iOS 16
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: New Bugs
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: quiet.salt8175 at rickyromero.com

Created attachment 465996

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

Two screenshots, one displaying the correct behavior on iOS 16.3.1, and the broken behavior on 16.4.1.

My professional portfolio, https://hello.rickyromero.com, uses an SVG clip path in combination with CSS filters on the logo graphic. It uses these to subtly change the logo's color on top of its animated background.

On iOS 16.3.1 and previous releases, this effect works great. However, as of iOS 16.4 or 16.4.1, the effect no longer displays correctly. The CSS filters themselves work, but the effect is no longer clipped to my logo's shape by the SVG on the page. This results in a strange rectangle appearing at the top of the page. I've attached screenshots of the bug; both phones are the iPhone 13 Pro.

This issue isn't present on macOS Ventura 13.3.1. It also doesn't appear in Firefox 112 or Chrome 112.

---

This is the relevant CSS:
https://github.com/RickyRomero/hello.rickyromero.com/blob/main/styles/home.module.css#L78-L83

And here is the corresponding JSX markup (The SVG is included further down the page):
https://github.com/RickyRomero/hello.rickyromero.com/blob/main/pages/index.js#L198-L200

-- 
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/20230420/a7642e4d/attachment.htm>