Bug 255701 – REGRESSION (Safari 16.4?): SVG clip-path failing with backdrop-filter as of iOS ~16.4.1

• Component: Layout and Rendering
• Status: RESOLVED DUPLICATE

[Ricky Romero]

Created attachment 465996 [details]
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

[Radar WebKit Bug Importer]

<rdar://problem/108430331>

[Said Abou-Hallawa]

I verified this bug is fixed by the fix of bug 255577.

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