Вхід і реєстрація
Розробка · 21 липня 2020, 12:58 1130
Oleksandr, Multimedia Content Maker в Marketing agency

Туплять CSS анімації на iPhone (Safari iOS 13)

💡 Усі статті, обговорення, новини про Mobile — в одному місці. Приєднуйтесь до Mobile спільноти!

Хтось помітив, що на iPhone (Safari iOS 13) почала некоректно відображатись css анімація? Тупить, смикається, некоректно відпрацьовуються animation-delay. Не важливо що анімувати, top, left чи translate, opacity, scale...
На попередніх iOS все працює нормально.
Підкажіть, хто в курсі, що такого змінилось в Safari iOS 13, як теперь корректно робити анімації?

transition начебто працює нормально. Якщо через таймер в js додавати та видаляти клас/властивості — то анімація працює нормально. Але дуже не зручно і не завжди можна js використовувати.

Теми: CSS, iOS, mobile
👍ПодобаєтьсяСподобалось0
До обраногоВ обраному0
LinkedIn
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Дозволені теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Dmitry Kapustin IT System Administrator 23.07.2020 17:41

Сталкивался с подобным но не в iOS, а в браузерах на андроидах при обновлении jQuery, было связано с «prefers-reduced-motion: reduce». Решил через медиаквери что-то типа такого:

@media screen and (prefers-reduced-motion: reduce) {
    #contacts {
        transition-duration: 400ms;
        -moz-animation-duration: 400ms;
        -webkit-animation-duration: 400ms;
        transition-property: all;
        -moz-transition-property: all;
        -webkit-transition-property: all;
        animation-duration: 400ms;
        -moz-animation-duration: 400ms;
        -webkit-animation-duration: 400ms;
        animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        -webkit-animation-timing-function: ease-in-out;
    }
}
P.S.: если помогло — напиши что помогло.
Відповісти
Підтримати
Artem Korenevych 23.07.2020 12:01

Нет, ничего такого не обнаружил. Работает везде нормально.
Скорее всего проблема к конкретному подходу к CSS анимациям в принципе.
Погуглите «high performance css animation» и «smooth like a butter css animations».

Ps. Расшарьте ссылку на сайт

Відповісти
Підтримати
Dmytro Shchurov Frontend/React Developer в KAJO s.r.o. 22.07.2020 11:46

Apple вашим копистувачам скаже, що настав час купувати новий айфон. При цьому спочатку підставивши розробника

Відповісти
Підтримати
Oleksandr Multimedia Content Maker в Marketing agency 22.07.2020 11:48

10й, 11й — теж саме. тут щось в оновлені сафарі. навіть у емуляторах під мак

Відповісти
Підтримати
Dmytro Shchurov
Dmytro Shchurov Frontend/React Developer в KAJO s.r.o. 22.07.2020 11:54

Це відомий факт, что оновлюватися потрібно лише на версію х.3. Млже, чим далі, тим більшого номеру потрібно дочекатися... Як розробнику, якого знову підставила Епл, можу порадити зробити 2 файли (повна анімація, часткова) і завантажувати в залежності від версії ОС, допоки не полагодять

Відповісти
Підтримати
Oleksandr
Олексій Пєніє 23.07.2020 09:50
щось в оновлені сафарі

Чота ржу. Справа не в оновленні сафарі, а в його відсутності. Сафарі — це привид Internet Explorer, його треба хоронити без почестей, бажано з осиновим кілком.

Відповісти
Підтримати
Oleksandr
Aleksey Bober I am not looking for a new position в the moment 22.07.2020 08:39

translateZ(0) не помогает?

Відповісти
Підтримати
Oleksandr Multimedia Content Maker в Marketing agency 22.07.2020 11:35

Не пробував. Це якийсь хак?

Відповісти
Підтримати
Aleksey Bober
Aleksey Bober I am not looking for a new position в the moment 22.07.2020 12:15

Да, так и называется «нулевой хак». Применив его, слой будет считаться как 3D обьект, и будет отрисовываться в GPU, что собственно и должно избавить от лагов анимации.
Есть много методов оптимизации, например элементы с анимацией выносить в отдельные слои используя position: absolute/relative. В анимация стараться не изменять свойства влияющие на размер элемента. И по-хорошему нужно дебажить рендеринг, смотреть сколько времени занимает reflow и repaint. Может и не в css дело, т.к. даже сборщик мусора в js может остановить все css-анимации

Відповісти
Підтримати
Oleksandr
Symonenko Volodymyr software engineer 22.07.2020 07:15

Тут бы конечно на код посмотреть. Могу только порекомендовать статью developers.google.com/...​design-and-ux/input/touch

Відповісти
Підтримати
Oleksandr Multimedia Content Maker в Marketing agency 22.07.2020 11:37

в мене наразі не має девайсу. скаржаться користувачі. складно відтестувати — навіть емуляторів немає не під мак.

Відповісти
Підтримати
Олексій Пєніє
Олексій Пєніє 23.07.2020 09:45

А що ти відтестуєш, як там що завгодно бути може. Дав би адресу сайту, може тобі б хтось відтестував в кого схоже залізо, чи за копієчку якщо там щось довго.

Відповісти
Підтримати
Oleksandr
Victor Musienkо Senior Engineer в Noibu.com 21.07.2020 19:01

запиши відео? і який девайс? у мене на Х@13.5 все супер

Відповісти
Підтримати
Oleksandr Multimedia Content Maker в Marketing agency 22.07.2020 11:56

попрошу когось записати, т.к. сам користуюсь андроїд/віндовс

Відповісти
Підтримати
Victor Musienkо

Підписатись на коментарі

Не підписуватись
Скористайтесь акаунтом
×
з умовами використання сайту і політикою конфіденційності.