Flexbox Functionality Lost in Older Versions of Safari

Design help General
1

Hello Webflow Community! I am very excited to get help on this issue I am having.

The flexbox functionality is absolutely amazing! It saved a lot of time and helps for someone like me who understands only basic concepts of HTML and CSS.

The problem I am running into now is that all the areas I am using the flexbox in (and sometimes other parts) are not functioning properly on some older versions of Safari (current known issues have been versions 4, 6 and 7. Either they don’t “wrap children” and create one long row of items, or don’t show the entire grid I’ve built.

I dug into this and saw that flexbox is supposed to be supported by Safari versions 3 and up, so now I’m at the point of realizing I likely made a mistake somewhere, but can’t find it.

The public share link is below, and I’ve attached some photos (sorry they’re not screenshots) that show the problem my colleagues with older Safari versions are having.

Thank you in advance everyone!

1200×1600 147 KB

1000×750 46.4 KB

1200×1600 149 KB

Here is my public share link: Webflow - BOLD Communication & Marketing

2

According to this survey:

Only Safari 9+ support flexbox

Hope this clears up any confusions

1 Like
3

Thanks for that helpful link @PixelGeek!

I noticed if I looked at “all”, it shows that it can be supported between versions 6 through 8 if I use the prefix “-webkit-”

Do you know how this might be applied? Maybe it will fix the problem!

Here’s a screenshot:

4

Hi @PixelGeek!

I commented below, but maybe you didn’t see it since I didn’t do a direct reply.

Do you know how I might add the prefix “-webkit-”?
Apparently that needs to be added in order for it to be supported by a few of the older versions of Safari!

Thank you again!

5

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