Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css3 flexbox compatibility problems with Firefox and Safari

I'm trying to sort out my flexbox layout so it is compatible with latest versions of IE/Firefox/Safari, and I have issues with Firefox/Safari.

Proposed layout:

-----------------
     header
-----------------
    |
    |
    |
nav |  section
    |
    |
    |
    |

In Firefox and Safari <section> is underneath nav

CSS:

body {
  width:50%;
  height:100%;
  display: -ms-flexbox;
  -ms-box-orient: horizontal;

  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;

  -webkit-flex-flow: row wrap;
  -moz-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

header {
    padding-top:100px;
    -webkit-flex: 1 100%;
    -moz-flex: 1 100%;
    -ms-flex: 1 100%;
    flex: 1 100%;
}

nav {
    -webkit-flex: 1;
    -moz-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width:10%;
    height:100%;
}

section {
    -webkit-flex: 4;
    -moz-flex: 4;
    -ms-flex: 4;
    flex: 4;
    width:40%;
    height:100%;
}
like image 949
Neeta Avatar asked Jul 04 '13 15:07

Neeta


1 Answers

First off, this:

body {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flexbox;
}

Should be this:

body {
  display: -ms-flexbox;
  display: -webkit-flex;
}
@supports (flex-wrap: wrap) { /* hide from the incomplete Flexbox implementation in Firefox */
    body {
      display: flex;
    }
}

This doesn't do anything because IE doesn't have an implementation of the 2009 Flexbox draft:

body {
  -ms-box-orient: horizontal;
}

You've also added the moz prefix on the properties from the standard Flexbox draft, but Firefox implemented those prefix free (only the 2009 properties should have a moz prefix).

Even if you fix all of these things, it still won't work in Safari or Firefox. Why?

  • Until iOS7 comes out, Safari only has an implementation of the 2009 Flexbox draft. It fails to implement box-lines: multiple, which is what enables wrapping in that draft
  • Firefox has an implementation for the 2009 draft and the standard draft, but neither implementation supports wrapping.
like image 61
cimmanon Avatar answered Sep 28 '22 09:09

cimmanon