Flexbox not displaying correctly in Safari (Desktop & Mobile)

Community resources Bugs
1

UPDATE: I’m recreating it on another page and can’t reproduce the error. Perhaps there isn’t a bug!

I am creating a fluid grid with flexbox similar to this one: Fluid Grid How-To. I’ve only just begun.

Safari, on both desktop and mobile, is not displaying the first Flex Item flush within the left border of its Flex Container. Safari is nudging this first item over by a pixel or two, so things don’t sit squarely in the first row. The next Flex Item wraps down to the next row, causing an empty space. The next rows are flush. (My Flex Items aren’t stretchy, so it really brings out the bug.)

<img src="//cdck-file-uploads-us1.s3.dualstack.us-west-2.amazonaws.com/webflow1/original/3X/3/2/328a4fdef79b75bbde686f68cafb877c0407e0cc.png”>

I listed this as a bug because Chrome and Firefox display it correctly. This is no doubt a bug of Safari. But, I guess Webflow has to contend with the inadequacies of Safari. :confused:

Webflow’s published output can be seen here: Published version.

Here is the link from Webflow’s share button: Webflow version.
Go to the “Front Page” page for the affected area.
This Safari bug affects the Designer area, as well.

TLDR: Flex-children not sitting well in flex-parent only in Safari.

Thank you for reading, Webflow Team. Cheers, all.
—Tyler

2

This is a known issue.

There are a few workarounds but one that works consist in:

  • delete your grid
  • make it again from scratch but UNDER SAFARI. I mean the webflow designer, in Safari.

Once made in Safari it will work even if you continue to work in chrome afterwards… (eventually)

1 Like
3

Thanks, Vincent. I did make it in Safari, however, your advice on deleting the grid seems to have worked. Thanks, buddy. I appreciate your help.

1 Like
4

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.