Has me beat! At least a couple hours on this with no joy.
The applications nav item is a dropdown component.
In the dropdown component I have just a flex and 2 buttons inside.
Nothing I can do applies background blur to the dropdown content area.
You can see it here with semi opaque background and 30px blur, exact same as the nav its self, but it just won’t have it and as seen in image no blur is applied to dropdown.
I’ve tried isolating it but still no. Tried a multitude of css in web inspector, but no.
I think it’s related to the transform being automatically applied, lifting it out of the stacking order, so it sees nothing to blur behind???
I assume you are seeing this in Safari pre-v26? If so, you need to turn on the CSS Unprefixed Backdrop Filter feature. Should work fine in Chrome, Firefox and Safari v26.
Really seems like stacking issue, as filter blur work fine on it, just backdrop blur that does not. I don’t believe it’s seeing anything behind its self to blur.
@dan ‘s Sticky menu in the core pack behaves the exact same way. If you change the settings for background opacity in the main and submenu, and add some backdrop blur in the submenu setting it does not work, same as my example.
Figured it out, but it’s not bu any means intuitive.
You can not apply backdrop blur on a child of an element with backdrop blur.
They are in the same stacking context. Isolate can’t help you here.
So you must create two sibling stacking contexts.
In the example I absolutely position a background with custom class for blur, as a sibling to the navigation content, then the blur on the dropdown works, as none of its ancestors have blur.
You (As I did) would intuitively add blur to this NAV. But you can’t. You must branch off into two stacks (stacking contexts), so neither blur shares a direct ancestor with blur (or any other filter effect).
