Почему позиция изображения с flexbox сломана на Safari mobile?

У меня проблема с позицией изображения в браузере Safari на iPhone (Retina display). Как вы можете видеть, когда сайт находится в мобильной версии, я меняю flex-direction с row на column и размер изображения, поскольку он был проигнорирован. Это перекрывая div.textПочему позиция изображения с flexbox сломана на Safari mobile?

EDIT: решил: Я только что удалил flex: 0 0 20% от .avatar-wrap линии и все работает.

HTML:

<div class="reference"> 
     <p class="text"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
      cillum dolore eu fugiat nulla pariatur. 
     </p> 
     <div class="avatar-wrap"> 
      <img src="./assets/img/avatar.png" class="avatar"> 

      <div> 
       John Doe <br>CEO at <a href="johncompany.com">johncompany.com</a> 
      </div> 
     </div> 
</div

и CSS:

div.reference 
    width: 90% 
    display: flex 
    align-items: center 
    color: gray 
    margin-top: 20px 

    @media screen and (max-width: 1240px) 
     flex-direction: column 
     width: 100% 
     font-size: .9em 

    p 
     padding: 20px 

     &:before 
      content: '“' 
     &:after 
      content: '”' 

    .avatar-wrap 
     flex: 0 0 20% 

     display: flex 
     flex-direction: column 

     justify-content: center 
     align-items: center    

     div 
      margin-top: 15px 
      text-align: center 

      a 
       color: black 

.avatar 
    max-height: 256px

источник

2017-01-08 Jozef Cipa

Ваш код не может быть протестирован как опубликован (возможно, фрагмент будет эффективным). Я бы попробовал обернуть img также в контейнере '.avatar {flex: 1;} .avatar img {max-height: 100%}' img direct child из контейнера flex часто бывает проблемой (растяжение/расширение не как ожидаемый) :( –

@GCyrillus Я уже решил это. Проблема была не в 'div container', а в' flex: 0 0 20% '. Когда я удалил эту строку, все работает хорошо. –

Можете ли вы опубликовать ответ самостоятельно или, по крайней мере, обновить вопрос с подробностями, как вы его решили :)? Может быть полезно для другого пользователя с той же проблемой –

решаемые: Я только что удалили flex: 0 0 20% из .avatar-wrap линии и все работает.

источник

2017-01-08 15:00:45

Почему позиция изображения с flexbox сломана на Safari mobile?

ответ

Смежные вопросы