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?

Safari can sometimes render Webflow sites differently, resulting in parts of your site appearing hidden or broken, even though they show correctly in Chrome, Firefox, or Edge.

1. Check for Unsupported CSS or Experimental Features

• Safari (especially older versions) can have trouble with newer CSS features like backdrop-filter, min(), max(), clamp(), or aspect-ratio.
• If you’ve used custom code or enabled experimental layout features, try removing them temporarily and rechecking in Safari.

2. Look for Overflow or Visibility Issues

• Safari treats overflow: hidden and transform-related positioning differently than other browsers.
• Double-check that no parent elements have overflow: hidden, opacity: 0, or are positioned in a way that clips children unexpectedly.
• Try setting overflow: visible or adjusting Z-index on disappearing elements.

3. Verify Display and Flex/Grid Settings

• Height/width issues on flexbox/grids can cause items to collapse in Safari.
• Make sure containers and children have explicit height settings or are allowed to grow (like flex-grow: 1).
• Avoid relying only on auto height or some combination that isn't cross-browser consistent.

4. Check Webflow Interactions and Initial States

• Interactions using opacity, display: none, or move transforms at page load may not reset properly in Safari.
• Try disabling any page load interactions to see if that’s the cause.

5. Test Responsiveness & Scaling

• Safari can render elements oddly at certain breakpoints, especially with 100vh on iOS.
• Use min-height: 100vh cautiously and test across screen sizes.
• Consider using height: 100dvh instead of 100vh if you're working on iOS 16+.

6. Debug with Safari's Developer Tools

• Use Safari’s Web Inspector (Develop » Show Web Inspector) to identify elements being collapsed, hidden, or styled incorrectly.
• Look at computed styles, layout panel, and check if any scripts or interactions fail to load.

Summary

Content disappearing in Safari while working fine elsewhere is often due to unsupported CSS, overflow/visibility issues, or interaction bugs. Start by removing or simplifying layout features and custom interactions, then adjust overflow and positioning settings to ensure cross-browser consistency. Use Safari’s Web Inspector to pinpoint the exact issue.