https://preview.webflow.com/preview/firstcitizen?preview=9e61ff45a43ddea1b50bacf9084b4e59 Hi there, about to make a site go live and notice that the 4 coloured category boxes at the bottom of the home page (which are flex items) are not stacking correctly on Safari. Works okay on Chrome/Firefox. A…

Safari puts extra space after the last flex item. Don’t ask why. Safari is the new IE. You can fix it by making any one of the “column” elements 24% width instead of 25%. Edit: That’s a gorgeous site, BTW.

Flex items stacking incorrectly on Safari

Design help General

Bammedia (Cormac) July 11, 2017, 3:34pm 3

Thank you very much for the fix & feedback!
What a bizarre thing for Safari to do?!

1 Like

Topic		Replies	Views
Flex box stacking vertically not working in Firefox/Safari General	3	2771	June 18, 2016
Flexbox Grid Wrapping Incorrectly in Safari General	4	1449	April 11, 2017
Flexbox not displaying correctly in Safari (Desktop & Mobile) Bugs	3	1997	March 23, 2017
Flex issue on safari - fine in chrome General	5	1045	April 24, 2018
Site Rendering Problems on Safari (Mac, iPad & iPhone) General	1	1381	May 20, 2017

Flex items stacking incorrectly on Safari

Related topics