title: Flexbox-based CSS not functioning on any iOS browser
body: <p>I am using Jade, Stylus and Node JS for my website. It runs fine on desktop Chrome, Firefox, IE, and Edge. It runs fine on Android Chrome and Browser. It does not function properly on iOS Chrome or Safari, showing similar failures on both. It also does not work on Safari on desktop. It seems to work on iOS9 but not iOS8 or below.</p>
  
  <p>Here is a screenshot showing the difference between mobile Chrome on Android and mobile Chrome on iOS. <a href="http://imgur.com/a/kjU23" rel="nofollow">http://imgur.com/a/kjU23</a></p>
  
  <p>Even though I am explicitly putting the -webkit-, and nib is generating the -webkit- prefixes in the compiled CSS, why is it not working on mobile iOS browsers? Here is my full CSS on Github. <a href="https://github.com/Connorelsea/LSMSA-SGO-Website/tree/master/public/css" rel="nofollow">https://github.com/Connorelsea/LSMSA-SGO-Website/tree/master/public/css</a></p>
  
  <p>The live website, for testing and demonstration, is here: <a href="http://www.lsmsaSGO.com" rel="nofollow">http://www.lsmsaSGO.com</a></p>
  
  <p>The website's full Stylus code is a few thousand lines long, but an example is as follows. My Stylus code:</p>
  
  <pre><code>.addMore
      text-align center
  
      .multButtons
          width 100%
          display -webkit-flex
          display flex
          justify-content center
          -webkit-justify-content center
          align-items center
          -webkit-align-items center
          flex-direction column
          -webkit-flex-direction column
  </code></pre>
  
  <p>The compiled CSS using Stylus and Nib.</p>
  
  <pre><code>  .addMore {
      text-align: center;
    }
    .addMore .multButtons {
      width: 100%;
      display: -webkit-flex;
      display: -webkit-box;
      display: -moz-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: box;
      display: flex;
      -webkit-box-pack: center;
      -moz-box-pack: center;
      -o-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-justify-content: center;
      -webkit-box-align: center;
      -moz-box-align: center;
      -o-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-align-items: center;
      -webkit-box-orient: vertical;
      -moz-box-orient: vertical;
      -o-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-flex-direction: column;
    }
  </code></pre>