Bug 289149 – REGRESSION: backdrop-filter is not applied when value is a custom property

• Component: CSS
• Status: RESOLVED INVALID

[Yehonatan Daniv]

Starting from Safari 18.2, and Safari iOS 18, when the value of `-webkit-backdrop-filter` is a custom property it is not applied.
Still broken in STP 214.
Here is a simple example: https://jsbin.com/kejejohiba/1/edit?html,css,output

This is breaking sites for our users, here is an example that works everywhere else: https://michaelbeeri.wixstudio.com/my-site-748
You can navigate to other pages with more examples by clicking the links at the top.

[Yehonatan Daniv]

Also, doesn't even parse as IACVT so fallback value isn't working either.

[Radar WebKit Bug Importer]

<rdar://problem/146344120>

[Karl Dubost]

Created attachment 474517 [details]
rendering in safari, firefox, chrome

This seems to be working for me.

Safari Technology Preview  215 / 18.4          20622.1.6
Firefox Nightly            138.0a1       13825.3.9
Google Chrome Canary       136.0.7059.0  7059.0

[Karl Dubost]

Yehonatan, 
In my screenshot everything seems to display fine. Could you confirm it's what you are expecting or is there something else I should be looking at?

[Yehonatan Daniv]

Created attachment 474536 [details]
Screenshot of bug reproduction on STP 214

OK, I have STP 214, could be it was fixed on 215.
Adding attachment.

[Karl Dubost]

I can not reproduce on STP 214.
on macOS 15.3.2 (24D81)

I wonder if it's the version of the OS instead of version of Safari.
What is happening if you are upgrading.

[Yehonatan Daniv]

Karl Dubost, this is coming from complaints on user's live sites, mostly on iOS 18+.

[Yehonatan Daniv]

BTW, I can't upgrade since my OS is controlled by the company's IT.
But people are experiencing this on mobiles.

[Yehonatan Daniv]

We checked this site https://michaelbeeri.wixstudio.com/my-site-748 in STP on 15.3.1 and all of the examples still break. In some cases the beige section does get the filter effect.

[Karl Dubost]

Created attachment 474585 [details]
rendering in safari, firefox, chrome

OK I was able to reproduce with these steps to reproduce:

1. Go to https://michaelbeeri.wixstudio.com/my-site-748/home-1-1
2. Scroll the content until the Glass box overlaps the black leafy shape

Result: 
The black leafy shape should be blur. It is not it stays as it well defined

while in other browsers this is blur.

[Karl Dubost]

Reopening based on my previous comment.

[Karl Dubost]

The code is

```
.InKIFF {
    -webkit-backdrop-filter: var(--backdrop-filter,none);
    backdrop-filter: var(--backdrop-filter,none);
    background-color: var(--container-corvid-background-color,rgba(var(--bg,var(--color_11,color_11)),var(--alpha-bg,1)));
    background-image: var(--bg-gradient,none);
    border: var(--container-corvid-border-width,var(--brw,1px)) solid var(--container-corvid-border-color,rgba(var(--brd,var(--color_15,color_15)),var(--alpha-brd,1)));
    border-radius: var(--rd,5px);
    bottom: 0;
    box-shadow: var(--shd,0 1px 4px rgba(0,0,0,.6));
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}
```

The value for `--backdrop-filter` is blur(20px).

defined in 

```
#comp-m7u522427 {
    --brw: max(0.5px, 0.0023437 * (var(--scaling-factor) - var(--scrollbar-width)));
    --brd: var(--color_15);
    --bg: var(--color_13);
    --rd: 0px;
    --shd: none;
    --gradient: none;
    --alpha-brd: 1;
    --alpha-bg: 0.3;
    --backdrop-filter: blur(20px);
    --boxShadowToggleOn-shd: none;
    --static-spx: 0.1 * var(--one-unit);
    --bg-gradient: none;
}
```

[Matt Woodrow]

I also can't reproduce any issues with the jsbin reduced testcases.

The issue with https://michaelbeeri.wixstudio.com/my-site-748/home-1-1 is that the ancestor <section id="comp-m7u52242" has will-change:opacity (via var(--safari-sticky-fix)) (which is not present on other browsers, as implied by the name).

That establishes a backdrop root that contains the backdrop filter, and the leafy shape is outside of that root. Removing that rule make it blur as expected.

This all seems to be working as expected and specified.

Is there a bugzilla open for the --safari-sticky-fix that I could look at instead?

[Yehonatan Daniv]

@Matt Woodrow, I honestly can't understand how you can't reproduce, it's failing for us on every Safari +18.2 and on every iOS Safari that's +18.

On this page there's no sticky and it still fails: https://michaelbeeri.wixstudio.com/my-site-748

On the ones that do have sticky, removing the hack still doesn't cause the filter to work.

[Karl Dubost]

Created attachment 474702 [details]
rendering on two iOS

On the left side, iOS 18.4 Safari
On the right side, iOS 18.3.2 Safari

[Karl Dubost]

so It's not reproducing for me on iOS Safari 18.3+. Petals are blurred.
on https://michaelbeeri.wixstudio.com/my-site-748

On https://michaelbeeri.wixstudio.com/my-site-748/home-1-1
after scrolling the glass, the petals are not blurred.

[Yehonatan Daniv]

OK, I can confirm 18.3.2 is ok as well. On my Sonoma it's still broken, I'll check 15+.

I'll see if there's an open issue on the sticky overlap issue.
Thanks!