@ivemaker
Стартапы, 3Д графика, музыка

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

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

P.S. очень сильно надеюсь на спецов Тостера, которые смогут найти проблему, если она есть.
  • Вопрос задан
  • 764 просмотра
Пригласить эксперта
Ответы на вопрос 2
Анимация заставляет браузер проделывать кучу работы.
Разные браузеры работают по разному.

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

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

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

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