CODEWITHSUNDEEP
htmlioscssresponsive-designstylus
Connorelsea
Connorelsea

Reputation: 2438

Flexbox-based CSS not functioning on any iOS browser

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.

Here is a screenshot showing the difference between mobile Chrome on Android and mobile Chrome on iOS. https://i.sstatic.net/RMNT8.jpg

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. https://github.com/Connorelsea/LSMSA-SGO-Website/tree/master/public/css

The live website, for testing and demonstration, is here: http://www.lsmsaSGO.com

The website's full Stylus code is a few thousand lines long, but an example is as follows. My Stylus 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

The compiled CSS using Stylus and Nib.

  .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;
  }

Upvotes: 2

Views: 10180

Answers (3)

Rene van der Lende
Rene van der Lende

Reputation: 5281

Use Autoprefixer CSS online and you will get all current vendor prefixes for your CSS rule. Here's the result you would get:

.addMore .multButtons {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
        -ms-flex-direction: column;
            flex-direction: column;
  }

Upvotes: 3

Gordonium
Gordonium

Reputation: 3487

My guess is that this could happen for a variety of reasons. But did you know that you can view the HTML output generated by the device? If not: load the page on an iphone/ipad simulator (not an actual device). Then, open Safari on your mac (again not on the device). In the toolbar go to Preferences > Advanced and select "Show Develop menu in menu bar".

enter image description here

Then select Develop > Simulator and select the appropriate web page. You should, with a bit of investigation, be able to find the exact output generated for the device.

I've had problems like this a few times and normally I've only been able to debug them using the above method.

Update 1 (iOS9): Actually. Here's a link to the generated source code. This is what the page looks like on an iPhone 5 simulator:

enter image description here

Update 2 (iOS8):

This is running os iOS8. Here's a link to the source

enter image description here

Upvotes: 1

Benjamin Gandhi-Shepard
Benjamin Gandhi-Shepard

Reputation: 161

Turning off flex on the .issueContainer seemed to fix things for me.

.issueContainer {
    /* display: -webkit-flex; */
    /* display: flex; */
    /* flex-direction: row; */
    /* align-items: center; */
}

.issueContainer doesn't need flexbox to make it's children stack since that's the default behavior anyway.

Upvotes: 5

Related Questions