Сучасна диджитал-освіта для дітей — безоплатне заняття в GoITeens ×
Mazda CX 30
×

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

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

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

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

👍ПодобаєтьсяСподобалось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

Сталкивался с подобным но не в 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.: если помогло — напиши что помогло.

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

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

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

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

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

щось в оновлені сафарі

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

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

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

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

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

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

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

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

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

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