-webkit translate3d заикается с большими элементами
Я анимирую элементы, используя -webkit-transform: translate3d(x,y,z)
и функция хронометража кубического бейзера в сочетании с сенсорными событиями для iPhone для создания пользовательского типа скролл-метода.
Проблема в том, что анимация заикается (элемент останавливается на полсекунды), если элементы (в этом случае div страницы) имеют определенный размер. Если у меня ширина 320px и высота 1000px, все это прекрасно работает, но если я получаю высоту 2000px, я получаю неприятное заикание. Обратите внимание, что в начале он только заикается, почти как при загрузке, а потом все нормально.
Есть ли известные обходные пути?
1 ответ
Два возможных обходных пути.
Сначала отключите другие свойства CSS, а именно положение (сверху, слева, справа, снизу) и непрозрачность. Их смешивание, особенно если они анимируются, может привести к проблемам с производительностью.
Вы можете попробовать поэкспериментировать с максимально возможным отключением и посмотреть, устранена ли проблема. Если это так, то включите их один за другим, пока не будет найдено свойство проблемы.
Во-вторых, оберните ваш контент в iframe. Даже если iframe настроен на заполнение вида, он может значительно улучшить производительность, если он содержит очень большие изображения.