Почему тормозят css анимации на iOS?

Question

[ne0kaz]

Имеется сайт, где используются transition и keyframes. На андроид устройствах (даже даже бюджетных) все анимации идут как минимум в 35-45 fps, а вот на IOS очень сильно тормозят. Например на сайте есть всплывающие сообщения (не мадальные окна, просто маленько сообщения снизу) появляется с помощью bottom, но по какой-то причине сильно тормозят. Сами эти сообщения это просто текст с падингом и фоном, находящийся во флекс контейнере (для выравнивания, так как размер зависит от текста и устройства). Как я ранее говорил, на андроид все ок а на iOS все плохо. Также имеется задержка в анимациях, например когда при нажатии на кнопку ей даётся класс чтобы у неё была анимация. Тестировал на iPhone 8/7/7 Plus/6s.

Примеры кода показать сейчас не могу.

Answer 1

[strelok011]

При создании анимаций необходимо избегать изменений цсс свойств, ведущих к перерисовке лейаута. Вот тут есть перечень всех свойств, вас должны интересовать помеченные фиолетовым.
Анимация без тормозов для смещения блока будет если вместо изменения положения на экране вида bottom: 0, bottom: 200 использовать transition: transform
Так же рекомендуется добавлять
transform: translate3d(0, 0, 0);
- заставляет некоторые устройства запускать аппаратное ускорение.

Answer 2

[SagePtr]

Потому что Safari - экскременты. Худший браузер из худших. Можно сравнить его с Internet Explorer, только вот юзер древней винды может поставить другой браузер и отказаться от IE целиком, а юзер iOS прибит гвоздями к этому Сафари и даже обновить его не может по своей воле (если Apple решила, что для данного устройства обнов больше не будет), ни заменить на другой браузер (ибо такая политика AppStore)

Comments

[Ravin2b]

Это только Ваше личное мнение. Которая не имеет отношение к реальности. Safari отличный браузер. Достаточно автономный, современный, идёт в ногу со временем. А не как конкуренты которые отстают, или Требует слишком много ресурсов процесса и памяти, нагревая устройство до придела.

[SagePtr]

rmeskiev, ознакомьтесь с этой статьёй: https://httptoolkit.tech/blog/safari-is-killing-th...
И таких примеров - масса, множество возможностей в Safari появляется только через 2-3 года после появления в остальных браузерах. Всё бы ничего, но пользователи iOS вынуждены сидеть на нём, т.к. в AppStore больше никаких других браузеров нет, остальные - обёртки для их WebView (могу ошибаться с названием компонента, не пользуюсь этим мусором). А пользователи старых моделей iPhone даже обновиться не могут, т.к. поддержка их устройств закончилась, они навсегда залочены на старом браузере. Приходится городить кучу костылей вместо перехода на современные технологии. Раньше эту роль играл IE, но потом он умер к счастью.
Может быть, вы рассматриваете браузер, как пользователь, и считаете его хорошим, а я его рассматриваю, как веб-разработчик, и вижу, сколько проблем он причиняет. И только благодаря куче костылей и полифилов ваш браузер и открывает сайты пока ещё.

[Ravin2b]

SagePtr, интересное виденье вопроса. Благодарю. Вроде сейчас iOS разрешил другие браузеры устанавливать с собственными движками. Но сафари для меня one love. Хочу чтобы браузер развивался в лучшую сторону