Как предотвратить появление артефактов в Webkit при прокрутке страницы после остановки анимации CSS

При определенных условиях я должен остановить анимацию ключевых кадров CSS. Если я прокручиваю страницу после этого, я получаю артефакты на экране. Они появляются там, где был остановлен div перед остановкой анимации. Иногда я получаю «след» этих артефактов от исходной позиции до новой позиции ранее анимированного div.

В настольном Chrome обычно я вижу только один артефакт (перерисовка артефакта стирает его), но в iOS Safari у меня есть запутанный след от них.

Я пытался остановить анимацию CSS разными способами, и всегда получаю один и тот же результат. Я добавляю класс в div, который определяет новое местоположение (сверху/слева, сам div находится в относительном положении) и свойство, которое останавливает анимацию, я пробовал:

  1. Установка продолжительности анимации на минимум.
  2. Установка для -webkit-animation значения «нет»
  3. Приостановка анимации с помощью -webkit-animation-play-state

Ни один из них не исправил артефакты.


css css-animations webkit mobile-webkit
person Indigon    schedule 16.10.2012    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Добавьте это в css, где вы вызываете анимацию:

-webkit-transform: translate3d(0,0,0);

Это форсирует аппаратное ускорение.

person Jason Lydon    schedule 01.07.2013

arrow_upward
0
arrow_downward

У меня тоже была эта проблема.

translate3d следует применять ко всем дочерним элементам, участвующим в отображении артефактов.

Рабочий CSS для прокрутки контейнера и всех дочерних элементов внутри него

.scrolling-container {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.scrolling-container .child-element {
    position: relative;
    -webkit-transform: translate3d(0,0,0);
}
person Serge Seletskyy    schedule 09.09.2013