I’m having problems with nesting elements which both contain a backdrop-filter: blur.
My main nav-bar has flyout dropdown menus, which I have the container background of those set to transparent, and a backdrop-filter blur on the background of the flyout menu container so it blurs the background of anything that it opens above. (see image)
When scrolled, the main nav-bar will stay put on the page (absolute), and an animation will bring in a second, more condensed nav-bar with a blurred background will appear that will follow with the page (fixed), but when I’ve recreated that, the flyout menu no longer has a blurred background, it is opaque (only showing the transparent background and not blurring the actual background of anything behind it).
I’ve looked on the web for solutions for this, and have found maybe a few that mention it, but cannot implement them into webflow. I’ve heard this might be an issue with Chrome, but when checking in Edge and Safari, it shows the same.
If anyone has a solution to this, or have had this happen, I’d love to hear about it so maybe I can work this out. Thanks so much!
Hi John! I have been struggling with a similar issue where my backdrop blur displays fine in webflow designer but not in the preview mode or the live site. I have been trying to replicate that bug and apparently this happen when you add any sort of animation to the parent div of the div with the filter. I noticed it was working fine for me until I applied a fade-in animation to the parent container and then it stopped working till I removed it. Note: This doesn’t happen when the animation is applied to the div with the filter itself (Dunno if that’s possible for your case). Let me know if this solves your problem
I’m not sure that I can do that, as the filter is on the background of the sub-container, while the parent div has the animation, so there’s no where else for the animation to go unfortunately.
Do you know if this a bug with Webflow? Or a browser? I know that backdrop-filter: blur; isnt very stable with browsers as of now, and was wondering if there is an adequate alternative to my problem.
@hustler Doesn’t seem like a browser problem for me. I’d say it’s either a Webflow bug or a limitation in the backdrop-filter attribute itself. I dunno if there is a solid workaround but I like this article here. Else I’d just go with another effect. Cheers,
Experiencing a similar issue on simplesuite.co. On my nav div it works, but when you use the dropdown (e.g. child/nested element) I’m unable to get the backdrop filter to work. Scroll down to a white section with text behind for a clear view haha. Very odd.
Yet another explanation could be that a filter has been implemented on a higher-level parent element than the one where you’re aiming to apply the backdrop-filter.
