Streaming live at 10am (PST)

Flexbox Functionality Lost in Older Versions of Safari


#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!




Here is my public share link: https://preview.webflow.com/preview/bold-la?preview=3e6eeeb912dbee393402befac61ec82a


Flexbox prefixes are not supported in older versions of Safari
#2

According to this survey:
http://caniuse.com/#search=flexbox

Only Safari 9+ support flexbox

Hope this clears up any confusions


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