-webkit translate3d заикается с большими элементами

Я анимирую элементы, используя -webkit-transform: translate3d(x,y,z) и функция хронометража кубического бейзера в сочетании с сенсорными событиями для iPhone для создания пользовательского типа скролл-метода.

Проблема в том, что анимация заикается (элемент останавливается на полсекунды), если элементы (в этом случае div страницы) имеют определенный размер. Если у меня ширина 320px и высота 1000px, все это прекрасно работает, но если я получаю высоту 2000px, я получаю неприятное заикание. Обратите внимание, что в начале он только заикается, почти как при загрузке, а потом все нормально.

Есть ли известные обходные пути?

1 ответ

Решение

Два возможных обходных пути.

Сначала отключите другие свойства CSS, а именно положение (сверху, слева, справа, снизу) и непрозрачность. Их смешивание, особенно если они анимируются, может привести к проблемам с производительностью.

Вы можете попробовать поэкспериментировать с максимально возможным отключением и посмотреть, устранена ли проблема. Если это так, то включите их один за другим, пока не будет найдено свойство проблемы.

Во-вторых, оберните ваш контент в iframe. Даже если iframe настроен на заполнение вида, он может значительно улучшить производительность, если он содержит очень большие изображения.

Другие вопросы по тегам