2
У меня проблема с позицией изображения в браузере 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
Ваш код не может быть протестирован как опубликован (возможно, фрагмент будет эффективным). Я бы попробовал обернуть img также в контейнере '.avatar {flex: 1;} .avatar img {max-height: 100%}' img direct child из контейнера flex часто бывает проблемой (растяжение/расширение не как ожидаемый) :( –
@GCyrillus Я уже решил это. Проблема была не в 'div container', а в' flex: 0 0 20% '. Когда я удалил эту строку, все работает хорошо. –
Можете ли вы опубликовать ответ самостоятельно или, по крайней мере, обновить вопрос с подробностями, как вы его решили :)? Может быть полезно для другого пользователя с той же проблемой –