Have you experienced compatibility issues with Webflow on Safari where a significant portion of your site disappears while it appears fine on Chrome, Firefox, and Edge?

Webflow sites may sometimes display incorrectly or partially disappear in Safari due to rendering quirks, unsupported CSS properties, or browser-specific behaviors. This issue may not appear in Chrome, Firefox, or Edge, making it difficult to detect without specific Safari testing.

​

1. Identify Safari-Specific CSS and JavaScript Issues

​

• Check if you're using CSS properties that are not fully supported in Safari (e.g., backdrop-filter, position: sticky in some contexts).
• Use Developer Tools in Safari (right-click → Inspect Element) to review what's causing layout shifts or missing elements.
• Elements may disappear if Safari doesn’t evaluate certain transform, flexbox, or grid properties as expected.

​

2. Disable Webflow Scroll Effects Temporarily

​

• Webflow’s scroll-based interactions and animation triggers can behave inconsistently in Safari.
• Try disabling those interactions selectively to see if elements reappear.
• Use the “Interactions” tab to temporarily disable any scroll animations or set loading styles manually using initial states.

​

3. Review Overflow and Z-Index Settings

​

• Incorrect overflow settings (overflow: hidden) on parent elements can cause child content to disappear in some Safari versions.
• Z-index stacking issues are more pronounced in Safari when elements share common parent containers.
• Ensure elements have clearly defined stacking context if they overlap.

​

4. Check Custom Code and Browser-Specific Prefixes

​

• Remove or comment out custom code (especially anything related to Safari-specific workarounds or JS libraries manipulating the DOM).
• Pay attention to the use of CSS vendor prefixes (like -webkit-) when styling animations, transitions, or filters.

​

5. Ensure Proper Rendering of Embedded Content

​

• If the disappearing parts include iframes, videos, or third-party embeds, confirm you’re using Safari-compatible attributes like loading="lazy" and not relying on unsupported media features.

​

6. Test on Multiple Safari Versions

​

• Use BrowserStack or a Mac device with different macOS/iOS versions to reproduce it.
• A layout might work on Safari 17+ but break on Safari 14 or 15.

​

Summary

​

Safari rendering issues in a Webflow site are typically due to browser-specific quirks with CSS, interactions, or stacking context. Disable animations, check overflow and z-index settings, and validate all custom code to isolate the problem. Testing directly in Safari's Developer Tools is essential for proper debugging.