Соображения по производительности CSS3-переходов

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

Когда я располагаю сам элемент на странице без каких-либо других элементов, переход происходит относительно плавно на iOS. Однако, когда я комбинирую его с другими элементами CSS на странице, результат на iOS лагает как угодно. Это немного лучше, чем необработанная анимация jQuery, но не намного.

Я создал две тестовые страницы, чтобы продемонстрировать, что я имею в виду (разница едва заметна в обычном браузере):

Переключение управления само по себе > http://ben-major.co.uk/labs/iPhone%20UI/ios_toggle.html

В сочетании с другими элементами > http://ben-major.co.uk/labs/iPhone%20UI/

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

Любые советы и комментарии приветствуются.

10
задан BoltClock 8 November 2011 в 01:09
поделиться