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.)
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.
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.