Почему «моргают» слои анимации на iOS и Safari?

Question

[Артур Кранц]

Бьемся с разрабами уже 2-й месяц над данным вопросом. У меня на iphone 7 при загрузке нашего сайта https://sintez.io слои бэкграунда иногда сразу, а чаще всего немного после загрузки, начинают "моргать". Пропадают какие то слои, затем снова появляются. Эта же проблема может касаться и анимированных бордеров на кнопках/интерактивных элеметах (по факту анимированные градиенты). Запускаю тот же сайт на мобилке - андроиде, который слабее по железу моего iphone 7, все работает корректно и ничего "не моргает".

P.S. очень сильно надеюсь на спецов Тостера, которые смогут найти проблему, если она есть.

Answer 1

[Евгения Чернова]

Анимация заставляет браузер проделывать кучу работы.
Разные браузеры работают по разному.

Если вы видите мигания, значит отрисовка кадров превысила комфортные 60 fps.
Запись анимации на вашем сайте показывает, что пересчитывание стилей сжирает львиную долю времени перерисовки.

Почитайте для начала, есть хорошая статья для понимания на Хабре: "Производительность анимаций на сайтах". Как минимум узнаете как проверить что вам тормозит.
Особенно обратите внимание на то, как браузер рисует страницу. Ваша анимация гоняет его по длинному кругу перерисовки.

Comments

[Артур Кранц]

Евгения, спасибо за ответ. Суть в том, что логика морганий "как бы" понятна. Вы делаете упор на то, что при нехватке производительности машины, фпс прорисовки анимации начинает проседать, отсюда и "моргания". Проблема в том, что именно на iOS и Сафари, все моргает, в то время как на андроидах и хромах на железе меньшей мощности (относительно тестов на iOS и Сафари) ничего не моргает. Таким образом, если вопрос в производительности, почему на слабых андроидах все летает, а на более мощных iOS и Маках все тормозит и моргает?

[Евгения Чернова]

Артур Кранц, вы сравнивали скорость перерисовки и там и там?

Я имею ввиду что:
- нужно записать анимацию как описано в статье
- сравнить графики
- посмотреть что именно сжирает время ==> замедляет раскадровку

Скорей всего увидите что движок сафари медленнее рендерит страницы. Я обращаю особое внимание, что дело не только в железе.

Таким образом, если вопрос в производительности, почему на слабых андроидах все летает, а на более мощных iOS и Маках все тормозит и моргает?

А почему валидация формы на хроме нормально работает, а на Сафари нет?
А почему в IE не работает чуть менее чем все?
Ответ один : из-за разницы работы движков разных браузеров.

Если я правильно понимаю, у вас анимация вся на CSS написана?

[Артур Кранц]

Если я правильно понимаю, у вас анимация вся на CSS написана?

Да, вся анимация на CSS

[Евгения Чернова]

Артур Кранц, CSS анимация, если не ошибаюсь, самая "тяжелая" для брааузера.
Если разрабы умеют, предложите им перерисовать на canvas. Он "легче" в плане анимации.
И я не одна так думаю

Answer 2

[dom1n1k]

Открыл дев-тулзы, посмотрел что вы там крутите, и в глаза бросились ваши спрайты - их 11 штук и каждый размером 2000x2000px. Кажется, это дофига.
Я не знаю, в чем именно ваша проблема. Но подозреваю, что внутри мобильного Safari задан некий лимит памяти на 1 вкладку, при превышении которого браузеру велено проводить агрессивные оптимизации даже ценой ущерба для точности. Не то чтоб я это оправдываю, но выглядит похоже на то.
Ну и простой вопрос: зачем вам на мобиле текстура аж 2 тыщщи пикселей? Одной тысячи разве не хватит?