CSS Flexbox Browser Compatibility Issues

Question

I have been making use of CSS3's Flexbox Layout to arrange components on a website. For the most part, everything has been working great and as expected. However, after testing the website on an old iPad (running iOS version 9.3.5 (no idea where to find the Safari version)), and on a Samsung Edge 6's 'Internet' application, I uncovered a few problems. The content will load fully, as will the footer, but instead of the content being loaded at the top with the footer beneath, the footer seems to load randomly on top of the content (when I say on top, I don't mean at the top of the browser).

I have tested the website on the latest versions of Google Chrome and Microsoft Edge, as well on an iPhone 5's Mobile Safari, an iPhone 6's Mobile Safari and a Samsung Edge 6's Mobile Google Chrome; everything worked as expected.

I followed this tutorial (Flexbox) for arranging the components.

Here is my code (including the webkits, etc. I thought would increase compatibility):

html {
    height: 100%;
}

body {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

    min-height: 100%;
}

.content {
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

footer {
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}

I also added in the "order" property to see if it had any affect, but still nothing.

So what I'm wondering is, is there a solution to this? Or if not, what should I do as an acceptable fallback for less modern browsers?

Thanks,

Matthew

Here's a list of all the support browsers : http://caniuse.com/#feat=flexbox — Baruch, Jan 03 '17 at 13:18
To suggest an appropriate fallback we need to see the markup as well — Asons, Jan 03 '17 at 14:18
If you check my answer given here, you'll find a good sample how to avoid a lot of old flexbox issues: http://stackoverflow.com/a/34812442/2827823 — Asons, Jan 03 '17 at 14:29

andy jones · Accepted Answer · 2017-01-03T14:27:05.613

If you want to look at appropriate fallback methods, i would consider:

display: inline-block;
vertical-align: top;

Or if you want to go deeper, you could use the table method.

Parent element:

display: table;

Child element:

display: table-cell;

Obviously because you want flex to be the display of the element, and css being cascading you can apply the, display: table; to the element without affecting newer browsers:

.myElement{
   display:table; // Work on older - none support.
   display: flex; // Work on newer browsers. 
}

As @Baruch has pointed out in a comment browser support is everything and unfortunately older browsers don't like flex.

I would also take into consideration the amount of users on a specific browser, for example how many people actually use the samsung browser? Using http://gs.statcounter.com/ will be a big help, if the user base is low and the project doesn't allocate enough in the budget, drop support.

Or allow for graceful degradation - the page can never look the same in every browser ( it's just not possible ) however, if the page is usable and the user can get the information what is the problem?

Hope this helps.

Thanks for the response. Yeah, dropping support had crossed my mind, but if there was a simple solution I thought I'd be better to implement that. So is it possible to keep the flex code, but also add the additional display: table, etc. code? In my head the newer browsers will recognise the flex, whilst the older ones will recognise the display: table? Or will this cause a conflict? — , Jan 03 '17 at 14:22
Yes, because css cascades if you implement attributes before the flex browsers that don't support flex will use them. So, displaying table before flex will result in browsers that don't support flex, displaying table. Hope this makes sense. I will amend my answer to help more. — andy jones, Jan 03 '17 at 14:24

CSS Flexbox Browser Compatibility Issues

1 Answers1