CODEWITHSUNDEEP
ioscssiphoneflexboxmobile-safari
Kuzma
Kuzma

Reputation: 711

FlexBox doesn't work with iPhone 6

Having very weird problem with FlexBox testing on a iPhone6. On iPhone6 the FlexBox elements are not shown at all. As I understand they are hidden beneath each other.
As I don't own such device - I can't test it... I've used some online browser testers with trial subscription. I've made this jsFiddle:

.flex-container {
    display:-webkit-box;
    display:flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap:wrap;
    -ms-flex-wrap: wrap;    
    text-align:center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;   
    color: #fff;  
}
.flex-container .item h2{
  font-size: 1.1em;
  font-weight: 300;
}

.flex-container>div {    
  -webkit-box-flex: 0;
      -ms-flex: 0 1 50%;
          flex: 0 1 50%;  
  -webkit-box-sizing:border-box;  
          box-sizing:border-box;   
  max-width: 50%;
} 

.flex-container .item:first-child { 
  background: #986a4b;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;  
  -webkit-box-align: center;  
      -ms-flex-align: center;  
          align-items: center;  
  text-align: left; 
}

.flex-container .item.third, .flex-container .item.third article{
  background: #fff;
  color:#986a4b;
}

.flex-container .item:nth-child(4) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;  
}

/*IE11*/
.flex-container .item .first{height: /*100%;*/ auto; min-height: 1px;}
.flex-container .item img {     
    width: 100%;
}
.flex-container .item:not(img){
  padding: 1em;
}

.flex-container .item { 
  display: -webkit-box; 
  display: -ms-flexbox; 
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;   
  color: #fff;
  font-size: 0.9em;  
}

.flex-container .item {
    background: #fff;
}

.flex-container .margin{padding:60px;}

.flex-container article {
    color: #9f6a4a;
}

@media screen and (max-width: 1000px){    
  .flex-container .item .box .inner{font-size:1.5em;}  
  .flex-container .item{-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%;}
  }

  @media screen and (max-width: 600px){
  .flex-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;    
   }
  }

Through a browserstack it seems to work well. But on my live website it doesn't... The code is the same. I really don't understand how to fix it.. Already used such hacks such as min-height: 1px but no luck...

Upvotes: 1

Views: 2425

Answers (2)

SystemX
SystemX

Reputation: 371

replaced dispaly: flex; with display: -webkit-flex

solved it for me

Upvotes: 1

Kuzma
Kuzma

Reputation: 711

Could be resolved in two ways: 1). shorthand: flex: 1 1; 2). -webkit-flex: 1 1 100%;

Upvotes: 0

Related Questions