Плывут стили на iphone 6,7,8,se. Как исправить?

Question

[manevr33]

Подскажите, как исправить.

Плывёт фиолетовое сообщение на айфонах. Код такой

&--user {
    width: auto;
		min-width: 0px;
		display: flex;
    height: auto;
		flex-direction: column;
    max-width: 76%;
    color: #fff;
    padding: 10px 15px 10px 10px;
    align-self: flex-end;
    background: #7b2be0;
    box-shadow: 0px 5px 4px rgba(123, 43, 224, 0.31),
      -5px -5px 5px rgba(255, 255, 255, 0.08);
    border-radius: 15px 15px 0px 15px;
    .message__text {
      color: white;
			text-align: end;
      height: auto;
    }
  }

Так должно выглядеть

Comments

[Ankhena]

Зачем для этого блока вообще флекс?

[strelok011]

Просто бесит современное поветрие недоучек писать флексы для обычной тупой дивной верстки. Может кто-то подсказать, откуда это?
Достаточно убрать флекс и чудо придет же.
Извините за резкость, но вот блин жеж.

Answer 1

[Роман Ямчук]

{
  display: -webkit-flex; 
  display: flex;
}

На этих устройствах нет полной поддержки последних CSS 3 фич, таких как флексбоксы, поэтому применяйте префикс -webkit- к соотвествующим стилями