DanyGersh
@DanyGersh

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

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

Примеры кода показать сейчас не могу.
  • Вопрос задан
  • 1126 просмотров
Пригласить эксперта
Ответы на вопрос 2
@strelok011
При создании анимаций необходимо избегать изменений цсс свойств, ведущих к перерисовке лейаута. Вот тут есть перечень всех свойств, вас должны интересовать помеченные фиолетовым.
Анимация без тормозов для смещения блока будет если вместо изменения положения на экране вида bottom: 0, bottom: 200 использовать transition: transform
Так же рекомендуется добавлять
transform: translate3d(0, 0, 0);
- заставляет некоторые устройства запускать аппаратное ускорение.
Ответ написан
Комментировать
SagePtr
@SagePtr
Еда - это святое
Потому что Safari - экскременты. Худший браузер из худших. Можно сравнить его с Internet Explorer, только вот юзер древней винды может поставить другой браузер и отказаться от IE целиком, а юзер iOS прибит гвоздями к этому Сафари и даже обновить его не может по своей воле (если Apple решила, что для данного устройства обнов больше не будет), ни заменить на другой браузер (ибо такая политика AppStore)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы