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