Is there a bug in Webflow causing the backdrop filter to not work on Safari? Others are experiencing the same issue, as shown in the attached images in both Safari and Chrome. The blur effect should apply to the "local-nav_container" div.

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.

1. Confirm Safari Compatibility

• Safari support for backdrop-filter is available only in Safari 9+ and requires a semi-transparent background color (e.g., rgba() or hsla()).
• Ensure you are not using display: none at any point on a parent element, as backdrop-filter won’t work until the element is painted.
• Backdrops only blur what's behind them — visibility of the blur depends on actual content behind the container (not on empty background).

2. Check Your local-nav_container Settings

• Make 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.

3. Use Custom Code for Reliable Rendering

• 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.

4. Avoid Safari Rendering Quirks

• Safari can fail to render backdrop-filter properly if:
• The parent or background layer is not painted, such as when using empty divs or when not enough contrast exists.
• You’re testing on older Safari versions, or in Private mode, where backdrop-filter is sometimes disabled.

5. Preview Using Published Link

• Safari's rendering can differ between Webflow Designer and the published site.
• Always test on your published Webflow domain, not just inside the Designer preview.

Summary

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.