Streaming live at 10am (PST)

Flex Children Wrapping not supported on Mobile Safari before version 7.1


#1

When viewing my website ( enkosini.webflow.io ) on an old iPad 1 in Safari pics and divs that are flex children do not wrap properly. When viewing the same on a laptop in in Chrome, Explorer of Firefox they all wrap properly -- as they also do on a iPhone 6 and Android Nexus 5. The problem seems to be with Safari only.

I have read online that this may be a glitch in Safari and people writing 1st generation code have solutions. As the premiere second-gen code generator Webflow's Designer needs a solution as well.

The IOS of the iPad is 5.1.1. and the version of Safari is up to date.

All help is appreciated.
Pete Grimm


#2

Hi, that is not a bug. On iPad 1 you have either Safari 4.3 or 5.1 I suspect. In any case, you can't have above 5.1. And Mobile Safari (Safari iOS) starts supporting Flexbox wrapping properties at version 7.1.

http://caniuse.com/#search=flexbox <— click on Show All to see the mobile browsers.


#3

Vincent,
Thanks for the feedback. A little more explanation of the meanings of the various color schemes in the chart will be helpful. I take it the green parts of the chart indicate that flex wrapping is supported by those browser versions. If the red blocks for IE 9 and earlier indicate no compatibility, that is probably what I should be more concerned with given the numbers of people still using older versions of IE. Do you have and data which would show how many users would not be able to view a website developed with Flex coding? While our target audience consists of mostly upscale millenials who are likely to possess up-to-date browsers, I don't want my site to display improperly to a great number of people.

Any valuable feedback is appreciated.

Pete Grimm


#4

Click on the link above. It will explain to you in detail when you hover over the boxes.


#5

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