FlexBox не работает с iPhone 6 - PullRequest
Новая
       20

FlexBox не работает с iPhone 6

0 голосов
/ 14 мая 2018

Возникла очень странная проблема с FlexBox тестированием на iPhone6 ​​.На iPhone6 ​​элементы FlexBox не отображаются вообще.Насколько я понимаю, они спрятаны друг под другом.
Поскольку я не являюсь владельцем такого устройства - я не могу его протестировать ... Я использовал несколько онлайн-тестеров для браузеров с пробной подпиской.Я сделал это 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;    
   }
  }

Через browserstack это, кажется, работает хорошо.Но на моем живом сайте это не так ... Код такой же.Я действительно не понимаю, как это исправить .. Уже использовал такие хаки, как min-height: 1px но не повезло ...

1 Ответ

0 голосов
/ 16 мая 2018

Может быть решено двумя способами: 1). стенография: flex: 1 1; 2). -webkit-flex: 1 1 100%;

...