I’m running into a quirk with my navbar. After adding animations, my background blur suddenly stops working. When I refresh the site, you can see the blur flash in for a moment, then disappear—this also affects the contact button. To make things trickier, I can’t get the navbar and the dropdowns to share the blur at the same time.
Before adding animations, the menu background blur was working (though the dropdown blur wasn’t), and I know it’s possible to get it to work with animations because I rebuilt the nav from this Webflow template (Cultiva Website Page Template for Webflow), where everything works fine. Any ideas on how to fix this? Thanks in advance!
When backdrop-filter (or a CSS filter with blur) is combined with certain transitions or transforms, browsers can glitch or ignore the blur. This can happen if:
An animation or transform is applied directly to the element that has the backdrop/filter.
The final state of an animation removes or overrides the blur.
The dropdown is placed outside the blurred container (so it can’t inherit/overlap the blur).
There’s a z-index / stacking context issue causing the blur to be obscured.
Safari and Chrome have been known to drop the backdrop-filter/blur effect if the container is transformed in 3D or if the filter is toggled in the course of the animation. Also, if you use third-party libraries or Webflow interactions, the final style state can remove your blur.
So here’s what you can do, Don’t animate transform on the same element that has backdrop-filter: blur(...).
If you must animate positioning, consider animating a child or container inside, and keep the parent that holds backdrop-filter relatively static.
Try setting will-change: opacity, transform on the element you’re animating (if it’s separate from your blurred background).
This can sometimes help the browser not to “drop” the backdrop-filter.
Thanks for the insight. Your response prompted me to experiment and identify the animation causing the issue. It turns out the problem was due to applying a move transformation to the entire navbar component when scrolling up or down to hide it from view.
What’s strange is that this transformation was applied to the overall navbar, not directly to the elements with background blur. However, when I changed the animation target and applied the transformation directly to the element with the background blur, everything worked perfectly—the blur remained intact, and the navbar still moved as needed.
So, in my case, the fix was the opposite of what I expected—I had to apply the transform animation directly to the blurred element. Strange, but it worked!