Why does my flexbox grid display properly in Chrome, but not in Safari on tablet and mobile?
TL;DR
- Remove or adjust problematic height, min-height, and overflow settings on flex parents to fix layout issues.
- Use explicit flex values (e.g., flex-basis: 0%) and wrap flex children in a full-width container if needed.
- Avoid auto margins, apply -webkit-overflow-scrolling: touch for scrollable areas, and test with -webkit prefixes if using custom CSS.
Your flexbox grid may display correctly in Chrome but behave unexpectedly in Safari on tablet and mobile due to differences in how browsers interpret flexbox and CSS styles, especially on mobile WebKit (the engine behind Safari).
1. Check for min-height, height, or Overflow Issues
- Safari has known issues rendering flex children when the parent has a
min-height,height, or fixed overflow. - Removing or adjusting any of these properties from flex parents or major containers can resolve layout inconsistencies.
- Consider using
min-height: 0;oroverflow: hidden;on problematic flex containers to fix collapsing or stuck content.
2. Verify flex-basis, flex-grow, and flex-shrink Values
- Ensure consistent use of flex properties across breakpoints.
- Safari may interpret shorthand flex definitions differently (e.g.,
flex: 1vsflex: 1 1 0%). Try using explicit values likeflex-grow: 1; flex-shrink: 1; flex-basis: 0%. - If you're using Webflow's UI, double-check the Sizing settings in the Style panel under flex children.
3. Wrap Items in a Container if Needed
- Safari often needs an extra wrapper div when children are not sizing correctly or wrapping breaks.
- Wrap your flex items inside a div with 100% width to enforce proper layout behavior across mobile Safari.
4. Enable -webkit-overflow-scrolling: touch for Scrollable Flex Areas
- If your flex grid has a scrolling overflow (like horizontal scrolling), Safari may require this CSS property for smooth behavior.
- Apply it to the scrollable div only, not the entire grid.
5. Avoid auto Margins on Flex Children
- In Safari mobile, margin: auto on flex children sometimes causes collapse or spacing issues.
- Use justified space-between/around instead via justify-content on the flex parent.
6. Test for -webkit Prefix Requirements
- Safari (especially on iOS) sometimes requires
-webkit-prefixed properties like-webkit-flexor-webkit-align-items. - Webflow mostly handles this automatically, but custom CSS outside Webflow may need to be rewritten.
Summary
Mobile Safari often renders flexbox layouts differently due to its WebKit engine. Check your flex settings carefully, avoid problematic CSS combinations, and use explicit property values. Use min-height: 0, avoid auto margins, and test with wrapping containers or -webkit prefixes if needed.