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.
TL;DR
- Use Safari version 9 or higher for CSS backdrop filter support and check for Webflow compatibility issues.
- Apply
backdrop-filterand-webkit-backdrop-filterin CSS to ensure Safari compatibility. - Confirm correct application of CSS in Webflow and check for conflicting styles.
- Clear Safari’s cache and disable extensions that might block styles.
- Test with a minimal Webflow setup in Safari to identify specific project issues.
The backdrop filter not applying correctly in Safari is potentially due to differences in browser support and implementation compared to other browsers like Chrome. Here's how you can troubleshoot and possibly resolve the issue:
1. Verify Browser Compatibility
- Ensure that you are using a version of Safari that supports CSS backdrop filter. Support for this feature began with Safari 9.
- Check the Webflow support page or external resources for any reported issues or updates regarding backdrop filter compatibility in Safari.
2. Check CSS Vendor Prefixes
- Use vendor prefixes for Safari (
-webkit-backdrop-filter) to ensure compatibility: - Define your backdrop filter in CSS as both
backdrop-filter: blur(10px);and-webkit-backdrop-filter: blur(10px);, adjusting10pxto your desired blur radius.
3. Inspect Webflow Styling and Structure
- Examine the Webflow Designer to ensure that the CSS styling is applied correctly to the
local-nav_containerdiv. - Ensure no overriding styles are negating the backdrop filter. Check other CSS properties or parent elements that might interfere.
4. Inspect Browser Settings
- Clear Safari's cache in case of leftover older styles affecting the current view (Windows: Ctrl+Shift+Delete / macOS: Cmd+Shift+Delete).
- Disable any content blockers or extensions that might affect how styles are rendered.
5. Test with Minimal Example
- Create a new Webflow project with just a basic setup applying a backdrop filter to an element. Preview it in Safari to determine if the issue is specific to the original project setup.
Summary
To resolve the backdrop filter issue in Safari, ensure that the correct CSS vendor prefixes are used, the styling is correctly applied without other interfering styles, and that Safari is updated to a compatible version. Testing with a minimal setup can help isolate project-specific problems.
