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

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

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

Существуют ли какие-либо известные обходные пути?


person jenswirf    schedule 28.05.2012    source источник


Ответы (1)


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

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

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

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

person JL235    schedule 18.07.2012