В чем проблема отображения верстки на iphone?

Question

[Егор Лавренов]

При открытии сайта с iphon'a , почему-то ломается верстка, и выглядит вот так

Но! Такое только при открытии с iphone, при открытии через эмуляцию в хроме, все ок, и выглядит как надо

Прогнал css код через автопрефиксер - не помогло.
В чем может быть проблема?
Ссылка на сам хост - dop.cx73067.tmweb.ru/persona/index.html

Comments

[Dima Polos]

с какого браузера такое?

[Alibek Kulseitov]

нету проблем все нормально

Answer 1

[Сергей delphinpro]

Флексы, вестимо.
Не используйте их на мобильных.

Чтобы выстроить блоки в столбик, не обязательно городить неведомую хрень типа

display: flex;
flex-direction: column;

Достаточно ведь просто выключить флекс и потомки выстроятся в столбик по дефолту

display: block;

Comments

[Егор Лавренов]

Но https://caniuse.com/#feat=flexbox говорит об отличной поддержке

[deeppines]

Егор Лавренов, Но картинка то у тебя на Айфоне все равно не такая как обещает caniuse.
У Сафари таки постоянно где то да вылезает фигня с флексами, что то правится, что то просто решается без флексов.

[Сергей delphinpro]

Егор Лавренов, вы не верьте всему что пишут =)
Если серьёзно, то мне неизвестно какая у вас версия системы/браузера, а тот же caniuse показывает вовсе не отличную картинку для старых девайсов.

Вы бы попробовали отключить флексы по моей рекомендации и сами убедились.

Answer 2

[ElijahTr]

Исправить под IE11, думаю заработает и в айфоне.
Указать height для родительских элементов.
( https://codepen.io/elijah_tr/pen/wpXyKx убрать высоту у контейнера и посмотреть на результат в разных браузерах)