How can I fix the issue of a container disappearing from my Webflow website only on iPhones in Safari and Google Chrome?

If a container disappears only on iPhones in Safari and Chrome, it's likely due to mobile-specific styling, Apple-specific CSS bugs, or overflow issues. Here's how to systematically fix it.

1. Check Display and Visibility Settings

• Go to the Webflow Designer, select the disappearing container.
• At each breakpoint (especially Mobile Portrait and Mobile Landscape), make sure:
• Display is not set to None.
• Visibility – Hidden is not enabled under Layout or Interactions.
• Opacity is not set to 0.
• Z-index is not less than overlapping siblings.
• Look for any conditional classes or combo classes that may apply only at smaller breakpoints.

2. Inspect Overflow, Positioning, and Height Constraints

• Ensure that the parent element of the container isn’t using:
• overflow: hidden (can cause child elements to vanish if positioned out of bounds).
• position: relative or absolute combined with incorrect top/left values that move it off-screen.
• min-height: 0 or height: 0 if content or children aren't forcing height.
• Avoid using vh units excessively inside iOS Safari due to mobile viewport quirks (e.g., iOS dynamically resizes the viewport when interface elements like the address bar show/hide).

3. Test Flexbox and Grid Issues

• On Apple mobile browsers, WebKit-based bugs may affect flex or grid containers:
• In flex contexts, adding min-height: 0 or overflow: auto to children may help if content is clipped.
• Check if any grid/flex child has display: contents or unusual alignment properties.

4. Check for Interactions or Scroll Animations

• Review the Webflow Interactions panel to see if any Page Load or Scroll interactions hide or move the container only on mobile.
• Confirm that the container isn’t set with a scroll into view animation that never triggers due to mobile scroll behavior.

5. Run Web Inspector for iOS

• Enable Remote Debugging:
• On a Mac, connect your iPhone via USB, open Safari on your Mac, then go to Develop > [your iPhone] > [your site].
• Use the inspector to check the element’s computed styles, what CSS rules are applied, and any console errors.

6. Check Custom Code or Embed

• If you added any Custom Code (head or body), temporarily remove it to see if it’s breaking layout.
• iPhones may behave differently with JS-based manipulations or injected styles.

7. Update and Republish

• After fixing any issue, always re-publish your project to all domains.
• Clear browser cache on the iPhone to ensure changes are loaded correctly.

Summary

To fix a disappearing container on iPhones in Safari and Chrome, review mobile breakpoints for hidden styles, check overflow and positioning, and audit custom scripts or interactions that could be device-specific. Use Safari’s Remote Debugging to inspect CSS on the affected device directly.