display: none
on parent elements.backdrop-filter
and -webkit-backdrop-filter
via custom CSS, and test on the published site rather than in Webflow Designer.The backdrop-filter
property not working in Safari — especially on Webflow-hosted projects — is a common issue that stems from known WebKit (Safari) behavior and not a Webflow-specific bug.
backdrop-filter
is available only in Safari 9+ and requires a semi-transparent background color (e.g., rgba()
or hsla()
).display: none
at any point on a parent element, as backdrop-filter
won’t work until the element is painted.local-nav_container
SettingsMake sure the local-nav_container
has:
A background color with semi-transparency (e.g., background-color: rgba(255, 255, 255, 0.8)
).
The backdrop-filter: blur(...)
style applied via custom code or Webflow’s CSS.
Double-check if the element is within any position: fixed
or sticky
containers, which Safari may render differently.
Webflow’s visual editor doesn't yet expose all polishing effects well across browsers. For consistent Safari behavior, include the webkit prefixed property.
Add this in your Page Settings > Inside <style>
tag or via an Embed component:
```css
.local-nav_container {
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
```
Do not use raw HTML blocks in your question, but ensure both properties (-webkit-
and default) are applied.
backdrop-filter
properly if:div
s or when not enough contrast exists.backdrop-filter
is sometimes disabled.The backdrop-filter
not working in Safari is a known browser issue, not a Webflow-specific bug. Ensure you use a semi-transparent background, include the -webkit-backdrop-filter
prefix, and test via a published site to get reliable rendering in Safari.