Why does my flexbox grid display properly in Chrome, but not in Safari on tablet and mobile?

Your Flexbox grid displaying correctly in Chrome but breaking in Safari on tablet and mobile is likely due to known Flexbox rendering inconsistencies in Safari's mobile and tablet engines (especially older versions).

1. Check for min-height or min-width Issues

• Safari has difficulties rendering flex containers when min-height or min-width values are set, particularly percentages.
• If you're using % for dimensions, try swapping it with explicit vh, vw, rem, or px values and test again.

2. Confirm Flex Container Settings

• Make sure the parent Flex container has correct settings:
• Display: flex
• Flex-wrap: wrap (if you're using multiple rows/columns)
• Set align-items, justify-content, and flex-direction consistently across screen sizes.
• In Safari, improper use of flex-wrap or align-items: stretch can collapse rows or distort spacing.

3. Look for Auto Margin Bugs

• Safari often miscalculates auto margins inside flex children.
• Replace margin: auto with manual margin values or use padding as a workaround.

4. Use -webkit Vendor Prefixes

• Safari sometimes requires explicit -webkit- prefixes, especially in older versions.
• For example, add -webkit-flex or use Webflow’s built-in support for vendor prefixes (which it usually handles automatically).

5. Test Overflow and Sizing

• Safari may fail to compute flex item sizes correctly if:
• The content inside has oversized width/height, or
• You use overflow: hidden or overflow:auto without clear sizing.
• Test by temporarily removing overflow or setting explicit heights/widths on children.

6. Double-Check Media Queries in Webflow

• Webflow may auto-adjust styles per breakpoint (tablet/mobile).
• Go to Tablet and Mobile views and verify that:
• The grid and flex settings are inherited correctly.
• No unexpected style overrides exist for Safari to misinterpret.

7. Isolate Known Safari Bugs

Some well-documented Safari Flexbox bugs:

• Flex container inside a min-height 100% parent doesn’t stretch correctly.
• Flex items ignore basis or grow properties inconsistently.
• Safari may incorrectly render nested flexboxes.

Use Webflow’s Preview in Safari or test in actual devices using Responsive Design Mode in Safari Dev Tools to validate fixes.

Summary

The grid issue is likely caused by Safari-specific Flexbox rendering bugs, related to min-height, auto margins, flex wrapping, or sizing behavior. Adjust units, remove auto margins, enforce explicit sizing, and test with Safari-specific conditions in Webflow’s responsive views.