Непостоянная / глючная проблема CSS3-переходов на iPad 1 (с примером)? - PullRequest
3 голосов
/ 17 апреля 2011

С этим проектом на работе нам пришлось сделать iPad HTML5. Используя Backbone и jQuery Mobile, мы думали, что победим, но jQuery Mobile, похоже, вызывает больше проблем, чем должно быть. Использование таких вещей, как переходы страниц в jQuery Mobile, мучительно медленно, нестабильно и сбойно (я понимаю, что это все еще в Альфе).

Для наших нужд нам нужен плавный переход между страницами. Я решил провести несколько экспериментов, чтобы посмотреть, смогу ли я получить их лучше для решения на заказ. Я чувствую, что я довольно близок с этим, но анимация все еще кажется прерывистой и сбойной. Интересно, есть ли другой способ подойти к этому? Или, если есть кусок информации, которая поможет получить эту твердую скалу?

Я использую translateX () / translateY () CSS3 (с аппаратным ускорением), чтобы обеспечить лучшую производительность, но все же кажется ненадежной с ее производительностью. Иногда это нормально, иногда нет.

Я загрузил пример ... Обратите внимание, что это тестируется только в Chrome / Safari (что выглядит хорошо) и Mobile Safari на iPad 1-го поколения (который выглядит нестабильным). Если у вас есть iPad под рукой, взгляните на этот пример ...

http://littlejim.co.uk/code/ipad/jquery-plugin-page-transitions/

Он сделан как основной плагин, потому что, как только у меня будет этот гвоздь, я хочу больше его развивать.

Может кто-нибудь помочь с этим? Мне просто интересно, почему это все еще нестабильно на iPad?

ОБНОВЛЕНИЕ: я пытался использовать translate3d (), а также translateX и translateY (), без разницы.

1 Ответ

1 голос
/ 20 мая 2011

Только 3-мерные преобразования аппаратно ускоряются на iPad.Вы должны использовать translate3d и предоставить третий параметр, установленный в ноль.

http://googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html

...