Почему сайт криво отображается на iPhone?

Question

[SPACE_u]

У меня проблема с отображением сайта promo101.polyweb.design на iphone устройствах. Пробовала открывать на iphone 11, iphone 15. К тому же, использовала не только safari, но и chrome. Везде сайт выглядит криво. На пк и android устройствах все супер.

На айфоне съехала адаптивность, при условии, что прописана для нескольких форматов

также не работает покраска текста

Answer 1

[Maksym Sahaidak]

Погугли про специфику safari.
Убери у курсора - transform: translate(-50%, -50%) scale(1);
Вообще убери все эффекты + убери flex.
Он перестанет лагать. У меня жестко фризил на твоем сайте, пока не убрал.

Comments

[SPACE_u]

Фризы поправлю, спасибо
Но я не могу найти ответ, что делать с адаптивностью, 11 вроде нормально отображает (+-), но вот на 15ом все ломается
а вот текст *караоке* нигде не работает :(

[Maksym Sahaidak]

SPACE_u, я могу лишь предположить, ибо нет Афона, что дело в том что используются разные версии safari, или может IOS 15 айфона, внедряет свои встроенные UI правила.
А ты как тестиш ? Прога, расширение ? Или рил есть 2 айфона ?

[SPACE_u]

Maksym Sahaidak, у меня есть 11ый, у клиента 15ый айфон
может и ui, хороший вопрос

[DIVSIDE]

SPACE_u, думаю вам стоить начать с изучения азов верстки...
Что это такое, я так и не понял. Про разметку так вообще молчу

[SPACE_u]

DIVSIDE, я тот еще чайник, конечно, но это не отменяет вопроса выше :)

Answer 2

[Алексей Голягин]

Используйте вендорные префиксы, т.е. не просто:

display: flex;
flex-direction: column;

, а вот так:

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
        flex-direction: column;

В общем в помощь вам: Автопрефиксер CSS онлайн

Comments

[SPACE_u]

спасибо, попробую))

[DIVSIDE]

самый тупой совет который можно дать) Сафари 100 лет как поддерживает флекс.

[Maksym Sahaidak]

так себе совет, во 1 любой сборщик сам добавит что надо, во 2 это устаревшая чучня уже и не надо в сафари.

[SPACE_u]

что так, что так :(
*адаптация по 15ый айфон не работает (только под 15ый, все что ниже, все нормально)
*и не фиксица анимация с текстом
все еще тупык

[Владислав Лысков]

SPACE_u, раньше на айфонах был прикол, не знаю насколько он актуален
анимации тупили в режиме энергосбережения или когда зарядки меньше 20%

[SPACE_u]

Владислав Лысков, было, но это не тот случай

[Алексей Голягин]

DIVSIDE, Он сто лет поддерживает все, но на нем ничего толком не работает))) Ну на самом деле последние версии браузера норм поддерживают, а устаревшим поддержка не помешает

[DIVSIDE]

Алексей Голягин, Все функции флекса работали еще года 3 назад. Сам проверял когда сидел на старом маке. Так что не надо